Vue路由守衛(wèi)及頁面登錄權(quán)限控制的設(shè)置方法(兩種)
更新時間：2020年03月31日 15:25:01 作者：錢不多啊
這篇文章主要介紹了Vue路由守衛(wèi)及頁面登錄權(quán)限控制的設(shè)置方法,本文通過實例代碼通過兩種方法給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
①先在我們的登錄頁面存儲一個登錄數(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 ssr實現(xiàn)預(yù)取數(shù)據(jù)的方式
這篇文章主要介紹了更強大的 vue ssr 預(yù)取數(shù)據(jù)的方式，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧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)車牌號的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
Vue動態(tài)設(shè)置el-table操作列的寬度自適應(yīng)
這篇文章主要給大家介紹了關(guān)于Vue如何動態(tài)設(shè)置el-table操作列的寬度自適應(yīng),很多頁面都需要用到表格組件el-table,如果沒有給el-table-column指定寬度,默認情況下會平均分配給剩余的列,需要的朋友可以參考下2023-07-07
通過url傳遞參數(shù)是我們在開發(fā)中經(jīng)常用到的一種傳參方法，但通過url傳遞后改如果獲取呢？下面這篇文章主要給大家介紹了關(guān)于vue如何不通過路由直接獲取url中參數(shù)的相關(guān)資料，需要的朋友可以參考借鑒，下面來一起看看吧。2017-08-08
vue3應(yīng)用elementPlus table并滾動顯示問題
這篇文章主要介紹了vue3應(yīng)用elementPlus table并滾動顯示問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要為大家詳細介紹了Vue.js下拉菜單組件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
vue動態(tài)綁定組件子父組件多表單驗證功能的實現(xiàn)代碼
這篇文章主要介紹了vue動態(tài)綁定組件子父組件多表單驗證功能的實現(xiàn)代碼，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-05-05
這篇文章主要介紹了Vue計算屬性與偵聽器和過濾器，文中通過示例代碼介紹的非常詳細。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-10-10