vue-element-admin登錄攔截設(shè)置白名單方式
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è)參考，也希望大家多多支持腳本之家。
- 解決vue-element-admin安裝依賴npm install報(bào)錯(cuò)問(wèn)題
- 解決electron打包vue-element-admin項(xiàng)目頁(yè)面無(wú)法跳轉(zhuǎn)的問(wèn)題小結(jié)
- 使用vue-element-admin框架調(diào)用后端接口及跨域的問(wèn)題
- vue-element-admin后臺(tái)生成動(dòng)態(tài)路由及菜單方法詳解
- Vue-element-admin?導(dǎo)出json和導(dǎo)入json文件的方法
- 解決vue-element-admin中配置跨域出現(xiàn)的問(wèn)題
相關(guān)文章
JavaScript獲取echart曲線上任意點(diǎn)位的值詳解
這篇文章主要為大家介紹了JavaScript獲取echart曲線上任意點(diǎn)位的值詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要為大家介紹了vue全局?jǐn)?shù)據(jù)管理示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
今天小編就為大家分享一篇vue-router 中 meta的用法詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
Vue引用Swiper4插件無(wú)法重寫(xiě)分頁(yè)器樣式的解決方法
今天小編就為大家分享一篇Vue引用Swiper4插件無(wú)法重寫(xiě)分頁(yè)器樣式的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Vue3使用Vue Router實(shí)現(xiàn)前端路由控制
在現(xiàn)代Web應(yīng)用中,前端路由控制是非常重要的一部分,它可以幫助我們將不同的頁(yè)面內(nèi)容展示給用戶,同時(shí)保持用戶在瀏覽不同頁(yè)面時(shí)的連貫性,本文將介紹如何使用Vue Router來(lái)實(shí)現(xiàn)前端路由控制,需要的朋友可以參考下2024-10-10
Vue數(shù)組響應(yīng)式操作及高階函數(shù)使用代碼詳解
這篇文章主要介紹了Vue數(shù)組響應(yīng)式操作及高階函數(shù)使用代碼詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-08-08
Vue頁(yè)面加載完成后如何自動(dòng)加載自定義函數(shù)
這篇文章主要介紹了Vue頁(yè)面加載完成后如何自動(dòng)加載自定義函數(shù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
vue實(shí)現(xiàn)的多頁(yè)面項(xiàng)目如何優(yōu)化打包的步驟詳解
這篇文章主要介紹了vue實(shí)現(xiàn)的多頁(yè)面項(xiàng)目如何優(yōu)化打包的步驟詳解，文中通過(guò)示例代碼以及圖文介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
我們通常會(huì)用到腳手架vuecli創(chuàng)建項(xiàng)目,此時(shí)需要安裝腳手架,下面這篇文章主要給大家介紹了關(guān)于vue腳手架安裝以及安裝失敗問(wèn)題的解決辦法,需要的朋友可以參考下2022-07-07
vue如何實(shí)現(xiàn)el-select下拉選項(xiàng)的懶加載
這篇文章主要介紹了vue如何實(shí)現(xiàn)el-select下拉選項(xiàng)的懶加載，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04