OJ在线评测系统 前端开发设计优化通用菜单组件二 调试用户自动登录

通用的菜单组件开发二

接下来要完善 权限功能

就是只有登录后才能进入题目查看界面

用户只能看到我们有权限的菜单

我们要在路由文件里面去操作

原理是控制路由设置隐藏

只要用户没有权限 就过滤掉隐藏

全局权限管理

实现想清楚有那些权限

/*** 权限定义*/
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文件中引入