通用的菜单组件开发二
接下来要完善 权限功能
就是只有登录后才能进入题目查看界面
用户只能看到我们有权限的菜单
我们要在路由文件里面去操作
原理是控制路由设置隐藏
只要用户没有权限 就过滤掉隐藏
全局权限管理
实现想清楚有那些权限
/*** 权限定义*/
const ACCESS_ENUM = {NOT_LOGIN: "notLogin",USER: "user",ADMIN: "admin",
};//导出
export default ACCESS_ENUM;
我们接下来要在菜单组件里
判断用户是否有权限
定义一个通用的权限校验方法
import ACCESS_ENUM from "@/access/accessEnum";/*** 检查权限（判断当前登录用户是否具有某个权限）* @param loginUser 当前登录用户* @param needAccess 需要有的权限* @return boolean 有无权限*/
const checkAccess = (loginUser: any, needAccess = ACCESS_ENUM.NOT_LOGIN) => {// 获取当前登录用户具有的权限（如果没有 loginUser，则表示未登录）const loginUserAccess = loginUser?.userRole ?? ACCESS_ENUM.NOT_LOGIN;if (needAccess === ACCESS_ENUM.NOT_LOGIN) {return true;}// 如果用户登录才能访问if (needAccess === ACCESS_ENUM.USER) {// 如果用户没登录，那么表示无权限if (loginUserAccess === ACCESS_ENUM.NOT_LOGIN) {return false;}}// 如果需要管理员权限if (needAccess === ACCESS_ENUM.ADMIN) {// 如果不为管理员，表示无权限if (loginUserAccess !== ACCESS_ENUM.ADMIN) {return false;}}return true;
};export default checkAccess;
我们找到菜单栏的组件
// 展示在菜单的路由数组
const visibleRoutes = computed(() => {return routes.filter((item, index) => {if (item.meta?.hideInMenu) {return false;}// 根据权限过滤菜单if (!checkAccess(store.state.user.loginUser, item?.meta?.access as string)) {return false;}return true;});
});用户自动登录
不能刷新就要重新登陆
编写获取远程获取登录信息的代码
我们应该在一个全局的位置去获取触发这个
getLoginUser函数的执行
我们可以在路由拦截
全局页面入口拦截 app.vue
全局通用布局
我们选择的是在main.ts文件中引入
