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