聊聊不使用Vuex怎麼封裝登入狀態判斷

這篇文章帶大家了解一下不使用Vuex狀態管理，用簡單的封裝來進行登入狀態判斷的方法，希望對大家有幫助！

在專案中一定會有使用者登入狀態的判斷，所以我們需要封裝判斷登入狀態，用來滿​​足整個專案的應用，當然剛好不使用封裝的話，會造成耦合度高，程式碼冗餘等結果，在專案中可能常常用到vuex狀態管理來進行登入狀態的存，那如果專案用不到狀態管理，那就可以使用簡單的封裝來進行登入狀態判斷。 【相關推薦：vue.js影片教學】

登入狀態封裝

我們如果想要普通封裝登入狀態的話需要兩個函數即取得儲存的token的getToken和使用token判斷是否登入的isLogin,我們需要在src目錄下新建一個資料夾，或是在我們封裝要求的檔案目錄下新建一個auth.js即可。

getToken

取得token的話只需要透過使用localStorage取得token並傳回給函數值

export function getToken() {
  return localStorage.getItem("token");
}

# isLogin

判斷登入的話僅僅需要透過呼叫getToken獲得token的值來傳回布林值從而判斷使用者是否登入

export function isLogin() {
  if (getToken()) {
    return true;
  }
  return false;
}

除此之外，項目中還會有別的地方要使用到getToken，比如說在請求頭中需要轉入token的值等

使用方法

##我們在要使用的頁面中直接按需引入即可，比如說這裡我們只引進

isLogin

import { isLogin } from "@/request/auth";

在引入之後，有人就問了，我們判斷用

if else嗎，nonono，低了，隱藏分低了，來看我下面的操作

mounted() {
    // 登录判断，项目成功运行后启动
    isLogin()
      ? console.log("isLogin")
      : (console.log("Need to login"),
        this.$message.error('未登录'),
        this.$router.push("/login")
      );
  },

注意到這裡，我們的登入狀態判斷的觸發位置需要注意一下，一般是在

mounted的時候，也就是一般是在初始化頁面完成後的鉤子中進行登入狀態的判斷，這裡一般也是頁面取得資訊的請求函數的位置。

除此之外，我這裡的寫法是

?:，來進行函數觸發判斷的，正常來講可能很多人會使用if，對了，這裡的提示元件是element，大家可以根據自己元件庫的提示來進行不一樣的改變。

setToken

既然封裝了getToken，那肯定要再封裝個setToken，也是為了便捷一些

export function setToken(token) {
  return localStorage.setItem("token", token);
}

（學習影片分享：

web前端教學）

以上是聊聊不使用Vuex怎麼封裝登入狀態判斷的詳細內容。更多資訊請關注PHP中文網其他相關文章！