對(duì)博主來(lái)說(shuō)，這是個(gè)相當(dāng)復(fù)雜的問(wèn)題。

當(dāng)初在使用vue2+vuex進(jìn)行用戶(hù)信息持久登錄時(shí)，寫(xiě)了不下3篇博客，確實(shí)是解決了問(wèn)題，博客鏈接如下

• vue存儲(chǔ)和使用后端傳遞過(guò)來(lái)的token
• vue中對(duì)token的有效期的理解
• vuex刷新頁(yè)面丟失登錄的token信息的解決方案

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

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

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

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

知道我現(xiàn)在開(kāi)始使用vue3+pinia來(lái)寫(xiě)前端項(xiàng)目，問(wèn)題又來(lái)了

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

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

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

store文件的寫(xiě)法

直接看代碼：

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)
    };
    //   解決刷新頁(yè)面丟失store信息的問(wèn)題
    const clearUserInfo = () => {
      userInfo.value = {};
      localStorage.removeItem('user')
    };
    return {
      userInfo,
      getUserInfo,
      clearUserInfo,
    };
  },
  {
    persist: true,
  }
);

pinia用的組合式api寫(xiě)法

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

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

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

退出登錄時(shí)的操作

看看具體怎么解決吧

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

其實(shí)就是清除localstorage中的user對(duì)象

路由守衛(wèi)

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

我的寫(xiě)法

// 路由守衛(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對(duì)象來(lái)判斷是否登錄，但是前面說(shuō)過(guò)了，它存在localstorage中的是一個(gè)字符串，大體是下面這個(gè)樣子

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

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

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

最新評(píng)論