快捷導(dǎo)航

vue3+pinia用戶信息持久緩存token的問題解決

更新時間：2023年07月31日 09:31:59 作者：梔椩

本文主要介紹了vue3+pinia用戶信息持久緩存token的問題解決,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

第三篇博客出現(xiàn)的問題是，**每次刷新頁面，store里面的數(shù)據(jù)沒了，而localstorage中還有數(shù)據(jù)，**這樣的話，頁面上有些地方需要store的數(shù)據(jù)就加載不出來了，但token并沒有更新，出現(xiàn)了邏輯錯誤。解決方案就是每次在啟動頁面的時候，檢查一下localstorage中有沒有數(shù)據(jù)，有數(shù)據(jù)的話，重新設(shè)置一下store，當(dāng)然，在路由守衛(wèi)環(huán)節(jié)也添加了路由的放行規(guī)則

我把第三種方案當(dāng)做終極解決方案，確實很長一段時間都沒有再受到困擾

知道我現(xiàn)在開始使用vue3+pinia來寫前端項目，問題又來了

pinia和vuex遇到的問題是一樣的，我嘗試用第三篇博客來解決，按道理應(yīng)該是可以解決的，但實際上一直沒能解決。折騰很長一段時間，找到了一種比較折中的解決方案

pinia-plugin-persistedstate持久化存儲數(shù)據(jù)

實際上就是使用這個pinia-plugin-persistedstate插件，它解決的問題是，幫你把store中的數(shù)據(jù)持久化的存儲在localstorage中，并且比較好的一點是，當(dāng)你需要使用store中的數(shù)據(jù)時，它又從localstorage中取出來給你去渲染頁面，其實就和我上面第3篇博客的內(nèi)容差不多，這樣就不怕刷新頁面了，先來看看怎么寫和怎么中

store文件的寫法

直接看代碼：

import { ref } from "vue";
import { defineStore } from "pinia";
import { loginAPI } from "@/apis/user";
export const useUserStore = defineStore(
  "user",
  () => {
    const userInfo = ref({});
    const getUserInfo = async (data) => {
      const res = await loginAPI(data);
      // console.log(res);
      userInfo.value = res;
      // console.log(userInfo.value)
    };
    //   解決刷新頁面丟失store信息的問題
    const clearUserInfo = () => {
      userInfo.value = {};
      localStorage.removeItem('user')
    };
    return {
      userInfo,
      getUserInfo,
      clearUserInfo,
    };
  },
  {
    persist: true,
  }
);

pinia用的組合式api寫法

userInfo是用戶信息
getUserInfo是通過調(diào)用登錄接口，修改userInfo
clearUserInfo是清除用戶信息

在代碼的最后面，加了個對象persist: true，之后每次登錄，就會在localstorage中生成一個key為user的字符串對象，刷新頁面而這個對象不會消失，模板上需要渲染的時候，又把內(nèi)容添加給store，相對來說比較靠譜。命名規(guī)則就是definstore時定義的變量名。

在我沒有添加路由守衛(wèi)規(guī)則之前，這么寫的話，會有個問題，退出登錄后，還能返回到原來的路由，只是頁面上該有的用戶信息都沒有了，因為clearUserInfo并沒有刪除localstorage中的user對象，user一直都在，那按照之前的邏輯，當(dāng)然行不通了

退出登錄時的操作

看看具體怎么解決吧

//這是退出登錄用到的方法
const logout = () => {
    // userStore.clearUserInfo()
    localStorage.removeItem('user')    
    router.push('/login')
}

其實就是清除localstorage中的user對象

路由守衛(wèi)

路由守衛(wèi)是最麻煩的地方，邏輯理不清楚，就沒法正常跳轉(zhuǎn)

我的寫法

// 路由守衛(wèi)
import jwt_decode from "jwt-decode";
router.beforeEach((to, from, next) => {
  const isLogin = localStorage.user ? true : false;
  if (isLogin) {
    const user = JSON.parse(localStorage.user)
    const decode = jwt_decode(user.userInfo.token);
    const date = parseInt(new Date().getTime() / 1000);
    if (date - decode.iat > decode.exp - decode.iat) {
      localStorage.removeItem("user");
      next("/login");
    }
  }
  if (to.path == "/login") {
    next();
  } else {
    isLogin ? next() : next("/login");
  }
});

還是根據(jù)localstorage中是否有user對象來判斷是否登錄，但是前面說過了，它存在localstorage中的是一個字符串，大體是下面這個樣子