(添加用户管理页面权限控制)

src/access/accessEnum.ts

@@ -0,0 +1,10 @@
+/**
+ * 权限定义
+ */
+const ACCESS_ENUM = {
+  NOT_LOGIN: "notLogin",
+  USER: "user",
+  ADMIN: "admin",
+};
+
+export default ACCESS_ENUM;

src/access/checkAccess.ts

@@ -0,0 +1,32 @@
+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;

src/access/index.ts

@@ -0,0 +1,25 @@
+import router from '@/router'
+import { useLoginUserStore } from '@/stores/useLoginUserStore'
+import ACCESS_ENUM from './accessEnum'
+import checkAccess from './checkAccess'
+
+router.beforeEach(async (to, from, next) => {
+  const loginUserStore = useLoginUserStore()
+  const loginUser = loginUserStore.loginUser
+  console.log('登陆用户信息', loginUser)
+  const needAccess = (to.meta?.access as string) ?? ACCESS_ENUM.NOT_LOGIN
+  // 要跳转的页面必须要登陆
+  if (needAccess !== ACCESS_ENUM.NOT_LOGIN) {
+    // 如果没登陆，跳转到登录页面
+    if (!loginUser || !loginUser.userRole || loginUser.userRole === ACCESS_ENUM.NOT_LOGIN) {
+      next(`/user/login?redirect=${to.fullPath}`)
+      return
+    }
+    // 如果已经登陆了，但是权限不足，那么跳转到无权限页面
+    if (!checkAccess(loginUser, needAccess)) {
+      next('/noAuth')
+      return
+    }
+  }
+  next()
+})

src/main.ts

@@ -5,6 +5,7 @@ import App from './App.vue'
 import router from './router'
 import Antd from "ant-design-vue";
 import "ant-design-vue/dist/reset.css";
+import '@/access'
 
 const app = createApp(App)
 app.use(Antd);

src/router/index.ts

@@ -3,6 +3,7 @@ import HomePage from '@/pages/HomePage.vue'
 import UserLoginPage from '@/pages/user/UserLoginPage.vue'
 import UserRegisterPage from '@/pages/user/UserRegisterPage.vue'
 import UserManagePage from '@/pages/admin/UserManagePage.vue'
+import ACCESS_ENUM from '@/access/accessEnum.ts'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -26,6 +27,9 @@ const router = createRouter({
       path: '/admin/userManage',
       name: '用户管理',
       component: UserManagePage,
+      meta: {
+        access: ACCESS_ENUM.ADMIN,
+      }
     },
   ],
 })