vue-element-admin登錄攔截設(shè)置白名單方式

更新時(shí)間：2024年03月12日 10:25:21 作者：閣下何不同風(fēng)起？

這篇文章主要介紹了vue-element-admin登錄攔截設(shè)置白名單方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue-element-admin登錄攔截設(shè)置白名單

用途：

在vue中我們一般把登錄攔截及權(quán)限處理在permision.js文件中并在min.js中導(dǎo)入；

當(dāng)頁(yè)面跳轉(zhuǎn)時(shí)判斷用戶是否登錄及token是否過(guò)期，若token過(guò)期/未登錄則會(huì)重定向到login頁(yè)面；

但有些項(xiàng)目除了登錄頁(yè)還有用戶注冊(cè)頁(yè)面，此時(shí)需要設(shè)置白名單使得可以直接從login頁(yè)面跳轉(zhuǎn)至regist頁(yè)面而不會(huì)被重定向到login頁(yè)；

permision.js：

import router from './router'
import store from './store'
import {
  Message
} from 'element-ui'
const whiteList = ['/login','/regist'] //白名單
 
router.beforeEach(async (to, from, next) => {
  // 確定用戶是否已經(jīng)登錄
  const hasToken = localStorage.getItem('token')
 
  if (hasToken) {
    if (to.path === '/login') {
      // 如果已登錄，則重定向到主頁(yè)
      next({
        path: '/'
      })
    }else{
      //權(quán)限處理部分，可參考vue-element-admin框架中permision.js權(quán)限處理部分
    }
  } else {
    //沒(méi)有token的情況
    if (whiteList.indexOf(to.path) !== -1) {
      // 如果在白名單內(nèi)則直接跳轉(zhuǎn)
      next()
    } else {
      // 其余頁(yè)面重定向到登錄頁(yè)
      next(`/login?redirect=${to.path}`)
    }
  }
})

切記要在min.js中引入該js： import './permission'

vue-element-admin正確使用登錄攔截設(shè)置白名單

用途：

在vue中我們一般把登錄攔截及權(quán)限處理在permision.js文件中并在min.js中導(dǎo)入；

當(dāng)頁(yè)面跳轉(zhuǎn)時(shí)判斷用戶是否登錄及token是否過(guò)期，若token過(guò)期/未登錄則會(huì)重定向到login頁(yè)面；

但有些項(xiàng)目除了登錄頁(yè)還有用戶注冊(cè)頁(yè)面，此時(shí)需要設(shè)置白名單使得可以直接從login頁(yè)面跳轉(zhuǎn)至regist頁(yè)面而不會(huì)被重定向到login 。

以下是使用代碼。

我把404和登陸頁(yè)面放入白名單再進(jìn)行邏輯處理

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue-loader中引入模板預(yù)處理器的實(shí)現(xiàn)
這篇文章主要介紹了vue-loader中引入模板預(yù)處理器的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-09-09
淺談vue中g(shù)et請(qǐng)求解決傳輸數(shù)據(jù)是數(shù)組格式的問(wèn)題
這篇文章主要介紹了淺談vue中g(shù)et請(qǐng)求解決傳輸數(shù)據(jù)是數(shù)組格式的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-08-08
Vue+Echarts封裝成組件使用及說(shuō)明
文章總結(jié)了將Vue和Echarts封裝成組件的經(jīng)驗(yàn),強(qiáng)調(diào)了組件的自適應(yīng)功能,作者希望這個(gè)經(jīng)驗(yàn)對(duì)大家有所幫助,并鼓勵(lì)大家支持腳本之家
2025-12-12
el-form resetFields無(wú)效和validate無(wú)效的可能原因及解決方法
本文主要介紹了el-form resetFields無(wú)效和validate無(wú)效的可能原因及解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-08-08
Vue分別運(yùn)用class綁定和style綁定通過(guò)點(diǎn)擊實(shí)現(xiàn)樣式切換
這篇文章主要為大家介紹了Vue分別運(yùn)用class綁定和style綁定通過(guò)點(diǎn)擊實(shí)現(xiàn)樣式切換，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-07-07
Vue MVVM模型與data及methods屬性超詳細(xì)講解
MVVM旨在利用WPF中的數(shù)據(jù)綁定函數(shù),通過(guò)從視圖層中幾乎刪除所有GUI代碼（代碼隱藏）,更好地促進(jìn)視圖層開發(fā)與模式其余部分的分離,這篇文章主要介紹了Vue MVVM模型與data及methods屬性
2022-10-10
通用vue組件化展示列表數(shù)據(jù)實(shí)例詳解
組件化開發(fā)能大幅提高應(yīng)用的開發(fā)效率、測(cè)試性、復(fù)用性等,下面這篇文章主要給大家介紹了關(guān)于通用vue組件化展示列表數(shù)據(jù)的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下
2023-06-06
vue父子組件相互通信方法示例梳理總結(jié)
這篇文章主要為大家介紹了vue父子組件相互通信方式示例梳理總結(jié)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-05-05
vue如何實(shí)現(xiàn)動(dòng)態(tài)加載腳本
這篇文章主要介紹了vue如何實(shí)現(xiàn)動(dòng)態(tài)加載腳本,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-02-02
vue-esign用途及使用方法詳細(xì)教程
vue-esign作為基于Canvas API(瀏覽器提供的圖形繪制接口)開發(fā)的專業(yè)簽名組件,能夠幫助開發(fā)者快速實(shí)現(xiàn)跨終端的手寫簽名功能,完美解決移動(dòng)端適配與電子合同簽署需求,這篇文章主要介紹了vue-esign用途及使用方法的相關(guān)資料,需要的朋友可以參考下
2026-03-03