一般都用vue写，可以从vant组件或者element-ui组件找个登录的from表单，写完css样式，设置校验规则，一种是非空的校验，一种是判断用户输入是否合法的校验，然后就是铺数据，这里一般用ajax发，一般都是用的模块化的思想来单独封装请求，发送后获取到token的数据，token除了登录页面别的页面想实现数据请求一般都要带，所以我们把token放到vuex中的state里，用mutations里定义的方法来修改state中的数据，因为vuex中存贮的数据是存在内存里刷新后就没有了所以我们要把token存在本地，可以用localstarge或者cookie存储再把本地存储的token赋值到vuex中。然后再用请求拦截器给来给每次请求都加请求头和token 。但是呢,token不是永久的,所以会有这种失效的问题,所以当时的处理方案,就是根据后端返回的状态码进行判断,如果确实不存在了,那么用Vue-Router中提供的一个钩子函数,实现拦截,如果存在,那就正常放行, 最后$router.push()实现跳转登录功能。

gitee的ssh地址git@gitee.com:cai-meng666/human-resources.git

接下来单独说一下登录的请求如何发出

  1. 表单验证（login/index.vue）

    1. utils/validate.js ---> validMobile

  2. 调用 api/user.js中封装好的api

    1. 找到axios实例：utils/request.js中获取axios实例

    2. 设置基地址从环境变量中获取，好处是上线后基地址自动变化。

    3. 全局都可以用process.env.VUE_APP_BASE_API,当基地址用

  3. 收集用户的参数，传给上一步中的api。（页面上收集页面的数据项名与接口中一致）

  4. 经过请求拦截器，添加请求头（添加token， utils/request.js）

  5. 后端没给设置，自己解决跨域问题，写一个代理转发(vue.config.js)，代理是与本机同源的，而代理是服务器，服务器与服务器之间没有跨域问题，让代理来获取后端的数据，再传给客户端这样就解决了跨域的问题，但是这只能用在dev模式下，上线后就无法用了

  6. 后端服务器要启动，mongoDB也要启动；后端才能收到请求，返回数据

  7. 经过响应拦截器的处理(utils/request.js)

    1. 判断当前操作是否成功，决定是否axios报错Promise.reject(）自动接收错误的结果

    2. 简化获取有效数据的写法(脱壳)response.data。axios请求的数据一般都爱带一层data可以在这里脱壳，方便后面使用

  8. 得到api调用之后的结果（login.vue）

  9. 保存token到vuex（store/modules/user.js）

  10. token做持久化(utils/auth.js)

# vue.js # 正则表达式 # javascript # scss
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue