前端注册登录的业务流程 - vue篇

落日映苍穹つ 2023-03-13 06:18 9阅读 0赞

> 项目中有一些路由是需要登录才可以进入的，比如首页，个人中心等等  
> 有一些路由是不需要登录就可以进入，比如登录页，注册页，忘记密码等等  
> 那如何判断路由是否需要登录呢？就要在路由JS里面做文章

### 登录状态验证？ ###

如项目是前后端分离开发，在这介绍vue开发的移动web项目->微信朋友圈

*  前端登录注册向后台发送请求，登录成功后台返回登录者用户信息，并携带 `token`值进行存储到 `cookie` 当中
 *  用户访问后台的 API 需要携带 `token`字段验证信息和后台 `session`进行验证

### 判断用户是否登录？ ###

*  如前台访问需要验证 `token`的API没有正常携带 `token`参数，即返回 指定的错误代码
 *  前端可根据后台返回的信息，在路由跳转中做判断。因为在这里使用的 `axios`做vue的请求模块，所以此次项目采用的是在请求拦截模块中根据后台返回的登录状态码进行判断

**需要注意：** 因为是路由router文件中使用`vue-router`做跳转，在这里就不能直接使用`this.$router`进行路由跳转，需要引入 `vue-router`的导出对象，  
使用该对象进行路由跳转功能 `import router from '@/router'`

request.interceptors.response.use(
      res => {
        // 如果用户没有登录
        if (res.data.code === 1000) {
          router.push('/login')
          // 提示信息
          weui.topTips('还没有登录', 1000)
          // 用户的cookie一般后台都设置了过期时间，如果cookie过期，就清除本地保存的用户信息
          localStorage.removeItem('saveUserInfo')
        } else if (res.data.code !== 0) {
          weui.toast(res.data.msg || '请求后台错误')
        }
        return res.data
      },
      err => {
        return Promise.reject(err)
      }
    )

用户访问需要验证的 API返回状态码 `1000`就跳转到登录页登录

### 登录成功保存用户状态信息 ###

*  登录成功，后台返回用户的基本信息，包括 token、和用户的基本信息
 *  `token`默认由后台指定存储到 `cookie`中
 *  登录成功返回的用户信息，保存到vuex中，（包括用户的头像、用户名、id）  
    **注意：** 因为是web端开发，用户使用的是浏览器访问网站，浏览器都具有刷新功能，而vuex的原理是一个公用的对象，存储数据到这个对象当中，用户浏览器执行刷新，保存的数据即清除，  
    为了解决这个问题，采用在用户刷新时，vue的`destory`销毁钩子函数中把vuex中的数据存储到 `localStorage`中，下次访问页面时在 `created`钩子中把本地保存的数据读取赋值到 vuex中
 *  这里采用，默认vuex中存储的是直接读取的 `localStorage`值复制到vuex中

export default new Vuex.Store({
      state: {
        // 存储用户登录后的信息，默认启动时从本地存储中获取值，如果本地存储没有值就空对象
        userInfo: window.localStorage.getItem('saveUserInfo')
          ? JSON.parse(window.localStorage.getItem('saveUserInfo'))
          : {}
      },
      mutations: {
        saveUserInfo (state, userInfo) {
          state.userInfo = userInfo
          // 保存到vuex，并保存到localstorage中
          window.localStorage.setItem('saveUserInfo', JSON.stringify(userInfo))
        }
      },
      actions: {
        saveUserInfo (context, userInfo) {
          context.commit('saveUserInfo', userInfo)
        }
      }
    })