對博主來說，這是個相當(dāng)復(fù)雜的問題。

當(dāng)初在使用vue2+vuex進行用戶信息持久登錄時，寫了不下3篇博客，確實是解決了問題，博客鏈接如下

• vue存儲和使用后端傳遞過來的token
• vue中對token的有效期的理解
• vuex刷新頁面丟失登錄的token信息的解決方案

第一篇博客是記錄前端如何使用token，簡言之，就是先把后端傳過來的token寫入到瀏覽器的localstorage緩存中，前端在處理路由之前，先檢查localstorage中有沒有token，有token就放行，沒有token就跳轉(zhuǎn)到登錄界面

第二篇博客是發(fā)現(xiàn)token過期后的處理方式，最后我的vue2項目都沒有使用這篇博客中的解決方案，而是使用了第三篇博客的解決方案

第三篇博客出現(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中的是一個字符串，大體是下面這個樣子

可以看出來，里面有你定義的state數(shù)據(jù)，所以，需要解析先成json才能正常取值，取值后，就是解析其中的token了，解析完token，就可以判斷有沒有過期來清除token了

總之，過程相當(dāng)繁瑣，希望不要再寫第5篇了。

到此這篇關(guān)于vue3+pinia用戶信息持久緩存token的問題解決的文章就介紹到這了,更多相關(guān)vue3 pinia用戶信息持久緩存token內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論