非Vuex實現的登錄狀態判斷封裝實例代碼

前言

在項目中肯定會有用戶登錄狀態的判斷,所以我們需要封裝判斷登錄狀態,用來滿足整個項目的應用,當然剛不使用封裝的話,會造成耦合度高,代碼冗餘等結果,在項目中可能常常用到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);
}

最後

到此這篇關於非Vuex實現的登錄狀態判斷封裝的文章就介紹到這瞭,更多相關非Vuex登錄狀態判斷內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!

推薦閱讀: