三亚网站运营托管介绍,网站建设公司美工如何找,yandex网站推广,企业网站有百度权重说明通用的菜单组件开发二
接下来要完善 权限功能
就是只有登录后才能进入题目查看界面
用户只能看到我们有权限的菜单
我们要在路由文件里面去操作
原理是控制路由设置隐藏
只要用户没有权限 就过滤掉隐藏
全局权限管理
实现想清楚有那些权限 /*** 权限定义*/
const ACCES…通用的菜单组件开发二
接下来要完善 权限功能
就是只有登录后才能进入题目查看界面
用户只能看到我们有权限的菜单
我们要在路由文件里面去操作
原理是控制路由设置隐藏
只要用户没有权限 就过滤掉隐藏
全局权限管理
实现想清楚有那些权限 /*** 权限定义*/
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文件中引入
