這篇文章主要講解了“不使用Vuex如何封裝登錄狀態判斷”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“不使用Vuex如何封裝登錄狀態判斷”吧！

成都創新互聯公司主要從事網頁設計、PC網站建設（電腦版網站建設）、wap網站建設（手機版網站建設）、響應式網站設計、程序開發、網站優化、微網站、微信小程序等，憑借多年來在互聯網的打拼，我們在互聯網網站建設行業積累了豐富的網站設計制作、做網站、網站設計、網絡營銷經驗，集策劃、開發、設計、營銷、管理等多方位專業化運作于一體。

在項目中肯定會有用戶登錄狀態的判斷，所以我們需要封裝判斷登錄狀態，用來滿足整個項目的應用，當然剛不使用封裝的話，會造成耦合度高，代碼冗余等結果，在項目中可能常常用到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如何封裝登錄狀態判斷這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創新互聯，小編將為大家推送更多相關知識點的文章，歡迎關注！

網頁名稱：不使用Vuex如何封裝登錄狀態判斷
文章位置：http://www.yijiale78.com/article28/gihdcp.html

成都網站建設公司_創新互聯，為您提供App開發、微信小程序、網站改版、做網站、、電子商務

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯