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'
    }
  }
})