Vue路由守衛(wèi)及頁面登錄權(quán)限控制的設(shè)置方法(兩種)
①先在我們的登錄頁面存儲(chǔ)一個(gè)登錄數(shù)據(jù)
// 登錄成功時(shí)保存一個(gè)登錄狀態(tài)；
sessionStorage.setItem("flag", 1);
② 添加路由守衛(wèi)
方法一： 直接在路由中添加
const router = new VueRouter({ ... })
// 路由守衛(wèi)
router.beforeEach((to, from, next) => {
// ...
})
方法二：當(dāng)我們使用的是export default 方法時(shí)可以在main.js中添加 router.beforeEach((to, from, next) => { }）方法。
const Recruit = resolve => require(['../components/common/main/index.vue'], resolve);
export default new Router({
routes: [
// 登錄
{
path: path.login.path,
name: path.login.path,
component: Login,
},
.........
③ 在路由當(dāng)中添加自定義字段requireAuth，判斷當(dāng)前路由是否需要登錄。
下圖中1是設(shè)置多權(quán)限時(shí)的設(shè)置方法，下圖中2是單權(quán)限設(shè)置方法
④ 在路由守衛(wèi)中添加我們自己的代碼邏輯。
// 路由守衛(wèi)
router.beforeEach((to,from,next)=>{
let flag = sessionStorage.getItem('flag ')
if(to.meta.requireAuth == true){ // 需要登錄權(quán)限進(jìn)入的路由
if(!flag){ // 獲取不到登錄信息
next({
path: '/login'
})
}else{ // 獲取到登錄信息，進(jìn)行下一步
return next();
}
}else{ // 不需要登錄權(quán)限的路由直接進(jìn)行下一步
return next();
}
})
總結(jié)
到此這篇關(guān)于Vue路由守衛(wèi)及頁面登錄權(quán)限控制的設(shè)置方法的文章就介紹到這了,更多相關(guān)vue 路由守衛(wèi)頁面登錄權(quán)限內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
隨著用戶體驗(yàn)要求的不斷提升,快捷鍵的處理也成為了提高用戶操作效率的一個(gè)重要方面,本文將深入探討如何在?Vue?3?中高效地處理快捷鍵,希望對(duì)大家有所幫助2024-11-11
這篇文章主要介紹了Vue 集成 storybook的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
vue 將多個(gè)過濾器封裝到一個(gè)文件中的代碼詳解
這篇文章主要介紹了vue 將多個(gè)過濾器封裝到一個(gè)文件中實(shí)現(xiàn)方法，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2020-09-09
vite+vue3項(xiàng)目中svg圖標(biāo)組件封裝的過程詳解
這篇文章主要介紹了vite+vue3項(xiàng)目中svg圖標(biāo)組件封裝的過程,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-03-03
Vue-element-admin?導(dǎo)出json和導(dǎo)入json文件的方法
這篇文章主要介紹了Vue-element-admin導(dǎo)出json和導(dǎo)入json文件,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-06-06
這篇文章主要介紹了vue對(duì)象的深度克隆方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
DeepSeek?助力?Vue?開發(fā)絲滑的表單驗(yàn)證Form?Validation功能
文章介紹了如何使用Vue3的組合式API創(chuàng)建一個(gè)表單驗(yàn)證組件,并提供了詳細(xì)的代碼示例,組件支持雙向綁定、自定義驗(yàn)證規(guī)則、樣式和布局等功能,還涵蓋了組件的調(diào)用示例、路由配置和頁面展示入口2025-02-02
vue3+element 分片上傳與分片下載功能實(shí)現(xiàn)方法詳解
這篇文章主要介紹了vue3+element 分片上傳與分片下載功能實(shí)現(xiàn)方法,結(jié)合實(shí)例形式詳細(xì)分析了vue3+element 分片上傳與下載相關(guān)實(shí)現(xiàn)技巧與操作注意事項(xiàng),需要的朋友可以參考下2023-06-06
vue3中各種類型文件進(jìn)行預(yù)覽功能實(shí)例
在vue移動(dòng)端項(xiàng)目中經(jīng)常遇到這樣的需求,對(duì)一些上傳的附件可以點(diǎn)擊之后在線預(yù)覽,所以下面這篇文章主要給大家介紹了關(guān)于vue3中各種類型文件進(jìn)行預(yù)覽功能的相關(guān)資料,需要的朋友可以參考下2021-09-09
vue-cli3.0如何使用CDN區(qū)分開發(fā)、生產(chǎn)、預(yù)發(fā)布環(huán)境
這篇文章主要介紹了vue-cli3.0如何使用CDN區(qū)分開發(fā)、生產(chǎn)、預(yù)發(fā)布環(huán)境，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11