? ? ? ?登錄的時候輸入密碼存到cookie里，可以由個人選擇加密方式，每次在路由跳轉的時候利用router.beforeEach((to, from, next) 判斷是否有token俊庇，如果有，發(fā)送到服務端驗證橄教，如果通過琳拭，就繼續(xù)路由，如果沒有露戒，就重定向到登錄界面椒功。
鑒權也是一樣的道理捶箱，在router配置中加上 meta: { role: ['Administrator'] }，在router.beforeEach（）中判斷要去的那個界面是否需要權限蛾茉。并且側邊欄是根據(jù)可訪問的路由動態(tài)生成的讼呢，不同級別的用戶可以看到的側邊欄是不一樣的，這就在一定程度上做到了簡單的權限管理的功能谦炬。
router.beforeEach((to, from, next) => {
? ? ? // console.log(to)
? ? ? NProgress.start(); // 開啟Progress
? ? ? if (store.getters.token) { // 判斷是否有token
? ? ? ? // alert('dont need login ');
? ? ? ? if (to.path === '/login') {
? ? ? ? ? next({ path: '/' });
? ? ? ? }
? ? ? ? else {//如果不是去login 而是其他需要判定權限的
? ? ? ? ? // console.log(store.getters.roles)
? ? ? ? ? if (store.getters.roles.length === 0) { // 如果當前用戶沒有拉取完user_info信息
? ? ? ? ? ? store.dispatch('GetInfo').then(res => { // 拉取user_info
? ? ? ? ? ? ? const roles = res.data.role;
? ? ? ? ? ? ? store.dispatch('GenerateRoutes', { roles }).then(() => { // 生成可訪問的路由表
? ? ? ? ? ? ? ? router.addRoutes(store.getters.addRouters) // 動態(tài)添加可訪問路由表
? ? ? ? ? ? ? ? // console.log(store.getters.addRouters);
? ? ? ? ? ? ? ? next({ ...to }); // hack方法 確保addRoutes已完成
? ? ? ? ? ? ? })
? ? ? ? ? ? })
? ? ? ? ? } else {
? ? ? ? ? ? // 沒有動態(tài)改變權限的需求可直接next() 刪除下方權限判斷 ↓
? ? ? ? ? ? if (hasPermission(store.getters.roles, to.meta.role)) {
? ? ? ? ? ? ? // console.log(to.meta.role)
? ? ? ? ? ? ? // console.log("has permission");
? ? ? ? ? ? ? next();//
? ? ? ? ? ? } else {
? ? ? ? ? ? ? // console.log("has no permission");
? ? ? ? ? ? ? next({ path: '/', query: { noGoBack: true } });
? ? ? ? ? ? }
? ? ? ? ? ? // 可刪 ↑
? ? ? ? ? }
? ? ? ? }
? ? ? } else {
? ? ? ? if (whiteList.indexOf(to.path) !== -1) { // 在免登錄白名單悦屏，直接進入
? ? ? ? ? next()
? ? ? ? } else {
? ? ? ? ? alert('please login');
? ? ? ? ? next('/login'); // 否則全部重定向到登錄頁
? ? ? ? ? NProgress.done(); // 在hash模式下 改變手動改變hash 重定向回來 不會觸發(fā)afterEach 暫時hack方案 ps：history模式下無問題，可刪除該行键思！
? ? ? ? }
? ? ? }
? ? });
