在項目中肯定會有用戶登錄狀態(tài)的判斷，所以我們需要封裝判斷登錄狀態(tài)，用來滿足整個項目的應(yīng)用，當然剛不使用封裝的話，會造成耦合度高，代碼冗余等結(jié)果，在項目中可能常常用到vuex狀態(tài)管理來進行登錄狀態(tài)的存，那如果項目用不到狀態(tài)管理，那就可以使用簡單的封裝來進行登錄狀態(tài)判斷。

登錄狀態(tài)封裝

我們?nèi)绻胍胀ǚ庋b登錄狀態(tài)的話需要兩個函數(shù)即獲取存儲的token的getToken和使用token判斷是否登錄的isLogin,我們需要在src目錄下新建一個文件夾，又或者在我們封裝請求的文件目錄下新建一個auth.js即可。

getToken

獲取token的話只需要通過使用localStorage取得token并返回給函數(shù)值

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

isLogin

判斷登錄的話僅僅需要通過調(diào)用getToken獲得token的值來返回布爾值從而判斷用戶是否登錄

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

除此之外，項目中還會有別的地方要使用到getToken，比如說在請求頭中需要轉(zhuǎn)入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")
      );
  },

注意到這里，我們的登錄狀態(tài)判斷的觸發(fā)位置需要注意一下，一般是在mounted的時候，即一般是在初始化頁面完成后的鉤子中進行登錄狀態(tài)的判斷，這里一般也是頁面獲取信息的請求函數(shù)的位置。

除此之外，我這里的寫法是?:，來進行函數(shù)觸發(fā)判斷的，正常來講可能很多人會使用if，對了，這里的提示組件是element，大家可以根據(jù)自己組件庫的提示來進行不一樣的改動。

setToken

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

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

最后

到此這篇關(guān)于非Vuex實現(xiàn)的登錄狀態(tài)判斷封裝的文章就介紹到這了,更多相關(guān)非Vuex登錄狀態(tài)判斷內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

軟件下載

源碼下載

軟件編程

網(wǎng)絡(luò)編程

在線工具

數(shù)據(jù)庫

CMS

常用工具

非Vuex實現(xiàn)的登錄狀態(tài)判斷封裝實例代碼

目錄

前言

登錄狀態(tài)封裝

getToken

isLogin

使用方法

setToken

最后

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具