Vue3-如何设计登录逻辑

1. 先根据用户名和密码，获取用户token，包括id，name, token

    const account = reactive({
      name: localCache.getCache('name') ?? '',
      password: localCache.getCache('password') ?? ''
    })
    
    store.dispatch('login/accountLoginAction', { ...account })

2. 根据用户id获取用户信息userInfo, 菜单权限userMenus，并将token、userInfo、userMenus 存放在浏览器缓存中

  actions: {
    async accountLoginAction({ commit }, payload: IAccount) {
      // 1. 获取token
      const loginResult = await accountLoginAction(payload)
      const { id, token } = loginResult.data
      commit('changeToken', token)
      // 给token做一个本地缓存
      localCache.setCache('token', token)

      // 2. 请求用户信息
      const userInfoResult = await requestUserInfoById(id)
      const userInfo = userInfoResult.data
      commit('changeUserInfo', userInfo)
      localCache.setCache('userInfo', userInfo)

      // 3. 请求用户菜单
      const userMenusResult = await requestUserMenusByRoleId(userInfo.role.id)
      const userMenus = userMenusResult.data
      console.log(userMenus)
      commit('chagneUserMenus', userMenus)
      localCache.setCache('userMenus', userMenus)

      // 4. 跳到首页
      router.push('/main')
    }
  }

- 三种存储的区别：
    - `localStorage`本地存储保存在客户端永久保存；
    - `sessionStorage`本地存储会话结束销毁；
    - `cookie`浏览器缓存可设置时间自行销毁，如不设置则浏览器关闭时销毁，如设置了过期时间，则呗存储在硬盘中，浏览器关闭后数据仍存在。
- cookie缺点：
    - 1、存储字节有限，只能保存字符串类型
    - 2、当用户非常注重个人隐私时有可能禁用浏览器cookie缓存功能
    - 3、不同浏览器访问的同一个页面的cookie是不能互相使用的
    - 4、`cookie`是硬盘上的文件，因此很容易被删除
    - 5、 `cookie`安全性不高，是以纯文本形式记录于文件中的，最好事先经过加密处理
- 三种存储的应用场景
    - `localStorage`长期登录（判断用户是否登录）
    - `sessionStorage`敏感账号一次性登录
    - `cookie`
- `WebStorage`对比`cookie`的优点：
    - 存储空间更大：cookie 4Kb、WebStorage 5M
    - 节省网络流量，可在本地直接获取，减少客户端和服务端的交互
    - 对于那些只需用户浏览一组页面时保存而关闭浏览器后就可以丢弃的数据`sessionStorage`非常方便
    - 快速显示
    - 安全性：不会随着HTTP header发送到服务器端因此不会被截获，但人存在伪造问题

3. 存放在vuex中，由于vuex是内存存储，刷新页面以前的JS内存被释放，重新加载脚本变量重新赋值，所以会被销毁。因此要判断是否有缓存，有则重新commit赋值，否则调用接口

  actions: {
    // vuex刷新后调用store/index.ts中setupStore()，执行该函数，如果有缓存则运行这里
    loadLocalLogin({ commit }) {
      const token = localCache.getCache('token')
      if (token) {
        commit('changeToken', token)
      }
      const userInfo = localCache.getCache('userInfo')
      if (userInfo) {
        commit('changeUserInfo', userInfo)
      }
      const userMenus = localCache.getCache('userMenus')
      if (userMenus) {
        commit('chagneUserMenus', userMenus)
      }
    }
  }

4. 权限管理，如果不是登录页或默认页，则判断是否有token，无则返回登录页，有则继续执行跳转至首页

router.beforeEach((to) => {
  if(to.path !== '/login') {
    const token = localCache.getCache('token')
    if(!token) {
      return '/login'
    }
  }
})