非Vuex實現的登入狀態判斷封裝

「這是我參與2022首次更文挑戰的第20天，活動詳情檢視：2022首次更文挑戰」

在專案中肯定會有使用者登入狀態的判斷，所以我們需要封裝判斷登入狀態，用來滿足整個專案的應用，當然剛不使用封裝的話，會造成耦合度高，程式碼冗餘等結果，在專案中可能常常用到vuex狀態管理來進行登入狀態的存，那如果專案用不到狀態管理，那就可以使用簡單的封裝來進行登入狀態判斷。

登入狀態封裝

我們如果想要普通封裝登入狀態的話需要兩個函式即獲取儲存的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); }

最後

這裡是大二前端小學生的一些些專案小總結，希望可以給你帶來幫助，如果對你有幫助的話，點個小贊贊再走吧🥳