权限管理设计
布局设置
accessEnum.ts
const ACCESS_ENUM = {
NOT_LOGIN: "notLogin",
USER: "user",
ADMIN: "admin",
};
export default ACCESS_ENUM;
checkAccess.ts
这个用于检查权限，参数是传递过来跳转路由需要的权限
然后这里面获取登录用户的权限，两个对比
例如这个需要权限
{
path: "/image",
name: "图片展示",
meta: {
hidenInMenu: true,
},
component: ImageView,
},
有的跳转不需要权限
{
path: "/",
name: "首页",
component: HomeView,
},
用这个获取需要的权限
//存在就获取，不存在就是undefined
const needAccess = (to.meta?.access as string) ?? ACCESS_ENUM.NOT_LOGIN;
const needAccess：这是声明一个常量变量 needAccess。
to.meta?.access：这是 Vue Router 中路由导航守卫的一个特性。to 是即将跳转到的目标路由对象，meta 是路由元信息对象，?. 是可选链操作符，用于判断 to.meta 是否存在，如果存在，则继续访问 access 属性。
as string：这是 TypeScript 的类型断言，将 to.meta?.access 强制转换为字符串类型。这里假设 access 属性是一个字符串，但由于可选链操作符的使用，它可能为空。
?? ACCESS_ENUM.NOT_LOGIN：这是空值合并运算符 (nullish coalescing operator)，用于判断 to.meta?.access as string 是否为 null 或 undefined，如果是，则返回 ACCESS_ENUM.NOT_LOGIN。空值合并运算符用于提供默认值，即如果 to.meta?.access 为空，则将 needAccess 赋值为 ACCESS_ENUM.NOT_LOGIN。
总的来说，这行代码的含义是：如果目标路由对象 to 的元信息中存在 access 属性，则将其转换为字符串并赋值给 needAccess 变量；如果不存在或为空，则将 needAccess 赋值为 ACCESS_ENUM.NOT_LOGIN。
/*
* 检查权限(判断当前登录用户是否具有某个权限)
* logingUSER 当前登录用户
* needAccess 需要有的权限
* boolean 有无权限
* */
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) {
// 如果用户没登录，那么表示无权限，查看登录用户是否已经登录了
//这个是登录用户的权限，需要的权限是user，但是登录用户的权限显示ACCESS_ENUM.NOT_LOGIN，返回跳转到无权限页面
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;
indes.ts
这个是路由守卫，跳转路由触发，然后检查权限
import store from "@/store";
import ACCESS_ENUM from "@/access/accessEnum";
import checkAccess from "@/access/checkAccess";
import router from "@/router";
router.beforeEach(async (to, from, next) => {
// alert("xxxx13" + "45");
console.log("登录用户信息", store.state.user.loginUser);
console.log(to.matched);
const loginUser = store.state.user.loginUser;
if (!loginUser || !loginUser.userRole) {
//用来触发action方法
await store.dispatch("user/getLoginUser");
}
//不需要登录就是ACCESS_ENUM.NOT_LOGIN，这个从meta取的
const needAccess = (to.meta?.access as string) ?? ACCESS_ENUM.NOT_LOGIN;
//要跳转的页面必须登录，需要判断权限
if (needAccess !== ACCESS_ENUM.NOT_LOGIN) {
//如果没有登录，跳转到登录页面
//如果没有登录!loginUser就是ture
if (!loginUser) {
next(`/user/login?redirect=${to.fullPath}`);
return;
}
//如果已经登录了，但是权限不足，那么跳转到无权限界面
if (!checkAccess(loginUser, needAccess)) {
next("/noAuth");
return;
}
//仅管理员可见，判断当前用户是否有权限
// if (to.meta?.access === "canAdmin") {
// if (store.state.user.loginUser?.role === "admin") {
// next("/noAuth");
// return;
// }
// }
}
//不需要登录直接跳转
next();
console.log(to);
});
设计全局对象
index.ts
import { createStore } from "vuex";
import user from "./user";
export default createStore({
mutations: {},
actions: {},
modules: {
user,
},
});
user.ts
import { StoreOptions } from "vuex";
import { UserControllerService } from "../../generated";
import ACCESS_ENUM from "@/access/accessEnum";
export default {
namespaced: true,
state: () => ({
//存储用户信息，这里是存储一个对象信息
loginUser: {
userName: "未登录",
role: "notLogin",
},
}),
actions: {
// getLoginUser({ commit, state }, payload) {
// commit("updateUser", { userName: "鱼皮" });
// },
//payload的作用
async getLoginUser({ commit, state }, payload) {
const res = await UserControllerService.getLoginUserUsingGet();
// console.log("xxxxxxxxxxxxxxxxxxxx");
console.log(res);
if (res.code === 0) {
commit("updateUser", res.data);
} else {
commit("updateUser", {
...state.loginUser,
userRole: ACCESS_ENUM.NOT_LOGIN,
});
}
},
},
mutations: {
updateUser(state, payload) {
console.log("payload");
console.log(payload);
state.loginUser = payload;
},
},
} as StoreOptions<any>;
路由
index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
import { routes } from "@/router/routes";
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
});
export default router;
routes.ts
import { RouteRecordRaw } from "vue-router";
import HomeView from "@/views/HomeView.vue";
import NoAuth from "@/views/NoAuth.vue";
import AdminView from "@/views/AdminView.vue";
import ImageView from "@/views/ImageView.vue";
import UserLoginView from "@/views/user/UserLoginView.vue";
import UserRegisterView from "@/views/user/UserRegisterView.vue";
import AboutView from "@/views/AboutView.vue";
import UserLayout from "@/layouts/UserLayout.vue";
export const routes: Array<RouteRecordRaw> = [
{
path: "/user",
name: "用户",
component: UserLayout,
children: [
{
path: "login",
name: "用户登录",
component: UserLoginView,
},
{
path: "register",
name: "用户注册",
component: UserRegisterView,
},
],
},
{
path: "/",
name: "首页",
component: HomeView,
},
{
path: "/noAuth",
name: "无权限",
component: NoAuth,
},
{
path: "/image",
name: "图片展示",
meta: {
hidenInMenu: true,
},
component: ImageView,
},
{
path: "/admin",
name: "管理员可见",
component: AdminView,
meta: {
access: "canAdmin",
},
},
{
path: "/about",
name: "about",
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
meta: {
hidenInMenu: true,
},
component: AboutView,
// component: () =>
// import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
},
];