diff --git a/src/access/accessEnum.ts b/src/access/accessEnum.ts new file mode 100644 index 0000000..6f08126 --- /dev/null +++ b/src/access/accessEnum.ts @@ -0,0 +1,10 @@ +/** + * 权限定义 + */ +const ACCESS_ENUM = { + NOT_LOGIN: "notLogin", + USER: "user", + ADMIN: "admin", +}; + +export default ACCESS_ENUM; diff --git a/src/access/checkAccess.ts b/src/access/checkAccess.ts new file mode 100644 index 0000000..fbd2f44 --- /dev/null +++ b/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; diff --git a/src/access/index.ts b/src/access/index.ts new file mode 100644 index 0000000..fe2519a --- /dev/null +++ b/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() +}) diff --git a/src/main.ts b/src/main.ts index 6285451..8d83d74 100644 --- a/src/main.ts +++ b/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); diff --git a/src/router/index.ts b/src/router/index.ts index d6b38bd..906fa29 100644 --- a/src/router/index.ts +++ b/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, + } }, ], })