vue-element-admin登錄攔截設(shè)置白名單方式
更新時間：2024年03月12日 10:25:21 作者：閣下何不同風起？
這篇文章主要介紹了vue-element-admin登錄攔截設(shè)置白名單方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue-element-admin登錄攔截設(shè)置白名單
用途：
在vue中我們一般把登錄攔截及權(quán)限處理在permision.js文件中并在min.js中導入；
當頁面跳轉(zhuǎn)時判斷用戶是否登錄及token是否過期，若token過期/未登錄則會重定向到login頁面；
但有些項目除了登錄頁還有用戶注冊頁面，此時需要設(shè)置白名單使得可以直接從login頁面跳轉(zhuǎn)至regist頁面而不會被重定向到login頁；
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') {
// 如果已登錄，則重定向到主頁
next({
path: '/'
})
}else{
//權(quán)限處理部分，可參考vue-element-admin框架中permision.js權(quán)限處理部分
}
} else {
//沒有token的情況
if (whiteList.indexOf(to.path) !== -1) {
// 如果在白名單內(nèi)則直接跳轉(zhuǎn)
next()
} else {
// 其余頁面重定向到登錄頁
next(`/login?redirect=${to.path}`)
}
}
})
切記要在min.js中引入該js： import './permission'
vue-element-admin正確使用登錄攔截設(shè)置白名單
用途：
在vue中我們一般把登錄攔截及權(quán)限處理在permision.js文件中并在min.js中導入；
當頁面跳轉(zhuǎn)時判斷用戶是否登錄及token是否過期，若token過期/未登錄則會重定向到login頁面；
但有些項目除了登錄頁還有用戶注冊頁面，此時需要設(shè)置白名單使得可以直接從login頁面跳轉(zhuǎn)至regist頁面而不會被重定向到login 。
以下是使用代碼 。
我把404和登陸頁面放入白名單再進行邏輯處理
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了JavaScript獲取echart曲線上任意點位的值詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要為大家介紹了vue全局數(shù)據(jù)管理示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
今天小編就為大家分享一篇vue-router 中 meta的用法詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
今天小編就為大家分享一篇Vue引用Swiper4插件無法重寫分頁器樣式的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue3使用Vue Router實現(xiàn)前端路由控制
在現(xiàn)代Web應(yīng)用中,前端路由控制是非常重要的一部分,它可以幫助我們將不同的頁面內(nèi)容展示給用戶,同時保持用戶在瀏覽不同頁面時的連貫性,本文將介紹如何使用Vue Router來實現(xiàn)前端路由控制,需要的朋友可以參考下2024-10-10
Vue數(shù)組響應(yīng)式操作及高階函數(shù)使用代碼詳解
這篇文章主要介紹了Vue數(shù)組響應(yīng)式操作及高階函數(shù)使用代碼詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-08-08
這篇文章主要介紹了Vue頁面加載完成后如何自動加載自定義函數(shù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
vue實現(xiàn)的多頁面項目如何優(yōu)化打包的步驟詳解
這篇文章主要介紹了vue實現(xiàn)的多頁面項目如何優(yōu)化打包的步驟詳解，文中通過示例代碼以及圖文介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2020-07-07
我們通常會用到腳手架vuecli創(chuàng)建項目,此時需要安裝腳手架,下面這篇文章主要給大家介紹了關(guān)于vue腳手架安裝以及安裝失敗問題的解決辦法,需要的朋友可以參考下2022-07-07
vue如何實現(xiàn)el-select下拉選項的懶加載
這篇文章主要介紹了vue如何實現(xiàn)el-select下拉選項的懶加載，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04