基於vue的路由許可權管理

2021-10-03 11:12:13 字數 1410 閱讀 6095

（此專案基於vue-cli跟layuot布局，不過後台系統基本都是這麼布局的吧）

現有乙個需求，要求把現有管理後台修改為可以根據不同使用者呈現出不同的選單欄（其實就是路由）就如下圖

1：先定義基本路由，然後使用router.addroutes()動態新增相關路由

2：將使用者的路由資訊儲存到localstorage

3：使用router.matcher重置路由

router.js檔案：定義基本路由，建立初始路由跟定義重置路由函式

import vue from 'vue';


import router from 'vue-router';


vue.use(router);


// 定義基本路由


export let routes = [


, ];const createrouter = () => );


};//建立路由


let router = createrouter();


//重置路由


export function resetrouter()
login.vue檔案：使用router.addroutes()動態新增使用者路由

//引進重置路由方法


import from '../router';


export default 


}, methods:,


children: [}]


}//新增使用者路由到本地


localstorage.setitem('userdata', json.stringify(userrouter ));


//新增路由之前應該先重置路由


resetrouter()


//新增使用者路由


this.addroutes(userrouter)


} },


logout()


}
註解：把使用者路由儲存到本地的作用是為了當使用者第二次開啟網頁時，可以不用再一次登入，根據localstorage裡面的資訊給使用者直接生成路由具體做法如下

export default 


}, methods:);


}else


},initrouter(userdata)


}}
到這裡乙個基於vue-router的使用者路由許可權就基本完成了，剩下的就只是頁面選單欄的顯示了，做法有很多，但是基本思路就是把userrouter（使用者路由）給存起來（vuex、vue-observable，我比較推薦用後者，除非共享資料非常多，否則用observable就足夠了），然後在去for迴圈每乙個item就可以了，這裡就我不寫

vue 許可權管理 動態路由（6）

1.動態生成路由 import vue from vue import router from vue router import nprogress from nprogress progress bar import nprogress nprogress.css progress bar st...

Vue路由許可權

在做後台管理系統的時候，一般都會遇見路由許可權的問題。大家可以先體驗一下最終的例子 authority vue router 例子專案位址 authorityrouter。在例子的登入頁面中，通過選擇不同的使用者型別來模擬不同的使用者賬號登入的情況，通過不同的使用者型別登入後台的時候，可以看到左側的...

vue 判斷許可權過期 vue 路由許可權

我把router.js分成router.js和routes.js兩個檔案 routes.js頁面存放 公共路由 角色路由 設定使用者角色路由許可權 router.js頁面 正常的新增路由 新增beforeach路由導航 判斷角色 根據角色 渲染不用頁面的路由選單 router.beforeeach ...