Vue路由守衛(wèi)及頁(yè)面登錄權(quán)限控制的設(shè)置方法(兩種)
①先在我們的登錄頁(yè)面存儲(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)及頁(yè)面登錄權(quán)限控制的設(shè)置方法的文章就介紹到這了,更多相關(guān)vue 路由守衛(wèi)頁(yè)面登錄權(quán)限內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
更強(qiáng)大的vue ssr實(shí)現(xiàn)預(yù)取數(shù)據(jù)的方式
這篇文章主要介紹了更強(qiáng)大的 vue ssr 預(yù)取數(shù)據(jù)的方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
這篇文章主要介紹了vue中push()和splice()的使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
element-ui中實(shí)現(xiàn)tree子節(jié)點(diǎn)部分選中時(shí)父節(jié)點(diǎn)也選中
這篇文章主要介紹了element-ui中實(shí)現(xiàn)tree子節(jié)點(diǎn)部分選中時(shí)父節(jié)點(diǎn)也選中的方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue自定義鍵盤實(shí)現(xiàn)車牌號(hào)的示例代碼
本文主要介紹了vue自定義鍵盤實(shí)現(xiàn)車牌號(hào)的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
Vue動(dòng)態(tài)設(shè)置el-table操作列的寬度自適應(yīng)
這篇文章主要給大家介紹了關(guān)于Vue如何動(dòng)態(tài)設(shè)置el-table操作列的寬度自適應(yīng),很多頁(yè)面都需要用到表格組件el-table,如果沒(méi)有給el-table-column指定寬度,默認(rèn)情況下會(huì)平均分配給剩余的列,需要的朋友可以參考下2023-07-07
vue不通過(guò)路由直接獲取url中參數(shù)的方法示例
通過(guò)url傳遞參數(shù)是我們?cè)陂_發(fā)中經(jīng)常用到的一種傳參方法，但通過(guò)url傳遞后改如果獲取呢？下面這篇文章主要給大家介紹了關(guān)于vue如何不通過(guò)路由直接獲取url中參數(shù)的相關(guān)資料，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-08-08
vue3應(yīng)用elementPlus table并滾動(dòng)顯示問(wèn)題
這篇文章主要介紹了vue3應(yīng)用elementPlus table并滾動(dòng)顯示問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要為大家詳細(xì)介紹了Vue.js下拉菜單組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
vue動(dòng)態(tài)綁定組件子父組件多表單驗(yàn)證功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue動(dòng)態(tài)綁定組件子父組件多表單驗(yàn)證功能的實(shí)現(xiàn)代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-05-05
Vue計(jì)算屬性與偵聽器和過(guò)濾器超詳細(xì)介紹
這篇文章主要介紹了Vue計(jì)算屬性與偵聽器和過(guò)濾器，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-10-10