当前位置：首页 > news >正文

网站设计机构网络营销软件

news 2025/9/15 6:46:08

网站设计机构,网络营销软件,自适应外贸网站开发,做的网站为什么看不到图片通用的菜单组件开发二接下来要完善权限功能就是只有登录后才能进入题目查看界面用户只能看到我们有权限的菜单我们要在路由文件里面去操作原理是控制路由设置隐藏只要用户没有权限就过滤掉隐藏全局权限管理实现想清楚有那些权限 /*** 权限定义*/ 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;});
});