1. 路由許可權
permision.js
// 做全域性路由
import router from "./router";
import store from "./store";
import from "@/utils/auth"; // 從cookie獲取令牌
const whitelist = ["/login"];
router.beforeeach(async (to, from, next) => );
} else else = await store.dispatch("user/getinfo");
// 根據當前使用者角色動態生成路由
const accessroutes = await store.dispatch(
"permission/generateroutes",
roles
);// 新增這些路由至路由器
router.addroutes(accessroutes);
// 繼續路由切換，確保addroutes完成
next();
} catch (error) `);}}
}} else else `);
}}});
import cookies from "js-cookie";
export function gettoken()
export function settoken(token)
export function removetoken()
import from "@/utils/auth";
const state = ;
const mutations = ,
set_roles: (state, roles) =>
};const actions = , userinfo) = userinfo;
return new promise((resolve, reject) => else
}, 200);
});},
// get user info
getinfo() );
}, 200);
});},
// remove token
resettoken() );
}};export default ;
import from "@/router";
/** * 根據路由meta.role確定是否當前使用者擁有訪問許可權
* @roles 使用者擁有角色
* @route 待判定路由
*/function haspermission(roles, route) else
}/**
* 遞迴過濾asyncroutes路由表
* @routes 待過濾路由表，首次傳入的就是asyncroutes
* @roles 使用者擁有角色
*/export function filterasyncroutes(routes, roles) ;
// 如果使用者有訪問權則加入結果路由表
if (haspermission(roles, tmp))
res.push(tmp);
}});
return res;
}const state = ;
const mutations =
};const actions = , roles) else
commit("set_routes", accessedroutes);
resolve(accessedroutes);
});}};
export default ;
2.按鈕許可權 （更細粒度的許可權控制）
如精確到按鈕、連線級別，此時可以封裝乙個指令，從而實現按鈕級別許可權控制
editor button
editor button
// src/directive/permission.js
import store from '@/store';
// 完成乙個指令， 該指令通過傳遞進來的許可權陣列和當前使用者的角色陣列過濾
// 如果使用者擁有設定的許可權可以看到， 否則刪除指令掛鉤的dom元素
export default = binding;
console.log(binding);
// 獲取該角色的許可權
const roles = store.getters.roles;
// 合法性判斷
if (permissionroles && permissionroles instanceof array && permissionroles.length > 0) )
// 如果沒有許可權則刪除當前dom
if(!haspermission)
}else
}}// 生成指令 main.js
import permission from '@/directive/permission';
vue.directive('permission', permission)
// 具體使用
Vue 知識點總結
1.mvvm?對比mvc mvvm model view viewmodel model 資料模型，可以定義資料修改和操作的業務邏輯 view ui元件，將資料元件轉換成ui展示 viewmodel 同步view和model的物件 view和model沒有直接的聯絡，通過viewmodel進行互動，...
Vue知識點總結
框架與庫的區別 jquery庫 dom操作 http請求 全家桶 如何起步 插值表示式 常用指令 全域性元件 場景 公共性功能元件，減少冗餘 全域性api vue.component 元件名 元件物件 過濾器 給資料的顯示進行操作，如反轉，改變屬性等 filter 全域性過濾器，vue.filter...
Vue知識點總結
近期幾天學習了vue，所以在這裡把零碎的知識點稍微總結一下 一.vue開發步驟 1.匯入vue.js檔案 2.編寫html 3.建立vue示例，傳入乙個json物件.二.vuejs特點 angular特點 基於mvvm，資料繫結，依賴注入 三.此json物件的屬性 el 選擇器 表示vue的控制範圍...