Vue路由守衛(wèi)及頁面登錄權限控制的設置方法(兩種)
更新時間：2020年03月31日 15:25:01 作者：錢不多啊
這篇文章主要介紹了Vue路由守衛(wèi)及頁面登錄權限控制的設置方法,本文通過實例代碼通過兩種方法給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
①先在我們的登錄頁面存儲一個登錄數(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是設置多權限時的設置方法，下圖中2是單權限設置方法
④ 在路由守衛(wèi)中添加我們自己的代碼邏輯。
// 路由守衛(wèi)
router.beforeEach((to,from,next)=>{
let flag = sessionStorage.getItem('flag ')
if(to.meta.requireAuth == true){ // 需要登錄權限進入的路由
if(!flag){ // 獲取不到登錄信息
next({
path: '/login'
})
}else{ // 獲取到登錄信息，進行下一步
return next();
}
}else{ // 不需要登錄權限的路由直接進行下一步
return next();
}
})
總結(jié)
到此這篇關于Vue路由守衛(wèi)及頁面登錄權限控制的設置方法的文章就介紹到這了,更多相關vue 路由守衛(wèi)頁面登錄權限內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
更強大的vue ssr實現(xiàn)預取數(shù)據(jù)的方式
這篇文章主要介紹了更強大的 vue ssr 預取數(shù)據(jù)的方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-07-07
這篇文章主要介紹了vue中push()和splice()的使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
element-ui中實現(xiàn)tree子節(jié)點部分選中時父節(jié)點也選中
這篇文章主要介紹了element-ui中實現(xiàn)tree子節(jié)點部分選中時父節(jié)點也選中的方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
本文主要介紹了vue自定義鍵盤實現(xiàn)車牌號的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-07-07
這篇文章主要給大家介紹了關于Vue如何動態(tài)設置el-table操作列的寬度自適應,很多頁面都需要用到表格組件el-table,如果沒有給el-table-column指定寬度,默認情況下會平均分配給剩余的列,需要的朋友可以參考下2023-07-07
通過url傳遞參數(shù)是我們在開發(fā)中經(jīng)常用到的一種傳參方法，但通過url傳遞后改如果獲取呢？下面這篇文章主要給大家介紹了關于vue如何不通過路由直接獲取url中參數(shù)的相關資料，需要的朋友可以參考借鑒，下面來一起看看吧。2017-08-08
vue3應用elementPlus table并滾動顯示問題
這篇文章主要介紹了vue3應用elementPlus table并滾動顯示問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要為大家詳細介紹了Vue.js下拉菜單組件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
vue動態(tài)綁定組件子父組件多表單驗證功能的實現(xiàn)代碼
這篇文章主要介紹了vue動態(tài)綁定組件子父組件多表單驗證功能的實現(xiàn)代碼，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-05-05
這篇文章主要介紹了Vue計算屬性與偵聽器和過濾器，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-10-10