在前端配合后端 RBAC(基于角色的访问控制) 实现权限管理,需要结合 动态路由、接口鉴权、UI 控制 等技术。
一、RBAC 权限模型
1. 核心概念
用户(User):系统的使用者(如张三、李四)。
角色(Role):权限的集合(如管理员、普通用户)。
权限(Permission):具体操作的最小单元(如
user:add
、order:delete
)。角色-权限映射:角色与权限的关联关系(如管理员拥有
user:add
和user:delete
)。
2. 后端接口设计
用户登录:返回用户的角色和权限列表。
获取角色权限:根据角色 ID 获取权限列表。
鉴权接口:校验用户是否有权限执行某个操作。
二、动态路由的核心思想
静态路由:在项目初始化时定义所有路由。
动态路由:在运行时根据用户权限或其他条件动态生成路由。
1,动态路由的实现流程:
用户登录后,获取用户的权限信息。
根据权限信息,筛选出用户有权限访问的路由。
使用
router.addRoute
(Vue Router 4)或router.addRoutes
(Vue Router 3)动态添加路由。在路由跳转时,通过路由守卫校验用户权限。
2,动态路由的优势
灵活性:根据用户权限动态生成路由,适应不同角色的需求。
安全性:通过路由守卫和动态路由,确保用户只能访问有权限的页面。
可维护性:将权限控制和路由管理分离,便于扩展和维护。
3, 总结
动态路由 是实现权限控制的核心技术之一。
通过动态生成路由和路由守卫校验,可以实现灵活的权限控制。
动态路由的实现步骤包括:定义路由、获取权限、筛选路由、动态添加路由、校验权限。
三、前端权限管理实现
关键原则:前端权限控制只是辅助,所有敏感操作必须由后端严格鉴权。
实现步骤:
用户修改本地权限数据后,可以绕过前端路由跳转,进入本不该访问的页面。
但该页面初始化时,会自动调用后端接口(如获取列表数据)。
后端对每个接口进行权限校验,发现无权限时返回
403
错误码。前端拦截
403
错误,强制跳转到无权限提示页或登录页。
注意:以下是一个完整的动态路由实现示例,基于 Vue Router 4 和 Vuex。
1,定义所有路由
在项目中定义所有可能的路由,包括需要权限控制的动态路由和公共路由。
// router.js
import { createRouter, createWebHistory } from 'vue-router';
// 公共路由(无需权限)
const publicRoutes = [
{
path: '/login',
component: () => import('@/views/Login.vue'),
meta: { isPublic: true }, // 标记为公共路由
},
{
path: '/403',
component: () => import('@/views/403.vue'),
meta: { isPublic: true }, // 标记为公共路由
},
];
// 动态路由(需要权限)
const dynamicRoutes = [
{
path: '/dashboard',
component: () => import('@/views/Dashboard.vue'),
meta: { permission: 'dashboard_view' }, // 需要权限
},
{
path: '/profile',
component: () => import('@/views/Profile.vue'),
meta: { permission: 'profile_view' }, // 需要权限
},
{
path: '/admin',
component: () => import('@/views/Admin.vue'),
meta: { permission: 'admin_access' }, // 需要权限
},
];
const router = createRouter({
history: createWebHistory(),
routes: publicRoutes, // 初始化时只添加公共路由
});
export { router, dynamicRoutes };
2,用户登录后获取权限
用户登录后,从后端获取权限信息,并存储在 Vuex 中。
// user.js
import { createStore } from 'vuex';
const user = createStore({
state: {
user: null,
permissions: [], // 用户权限列表
},
mutations: {
setUser(state, user) {
state.user = user;
},
setPermissions(state, permissions) {
state.permissions = permissions;
},
},
actions: {
async login({ commit }, { username, password }) {
const userInfo = await api.login(username, password);
const permissions = await api.getPermissions(userInfo.role);
commit('setUser', userInfo);
commit('setPermissions', permissions);
},
},
});
export default user;
3,动态生成路由
根据用户权限动态生成路由表,并添加到路由实例中。
// permission.js
import { router, dynamicRoutes } from './router';
import store from './store';
// 检查用户是否有权限
function hasPermission(permission, permissions) {
return permissions.includes(permission);
}
// 筛选出用户有权限访问的路由
function filterRoutes(routes, permissions) {
return routes.filter(route => {
if (route.meta?.isPublic) {
return true; // 公共路由,无需权限
}
if (route.meta?.permission) {
return hasPermission(route.meta.permission, permissions); // 校验权限
}
return true; // 默认允许访问
});
}
// 动态添加路由
export function setupDynamicRoutes() {
const permissions = store.state.permissions;
const accessRoutes = filterRoutes(dynamicRoutes, permissions);
accessRoutes.forEach(route => router.addRoute(route));
}
4,路由守卫校验权限
在路由跳转时,校验用户是否有权限访问目标路由。
// permission.js
router.beforeEach((to, from, next) => {
const permissions = store.state.permissions;
if (to.meta?.isPublic) {
next(); // 公共路由,直接放行
} else if (to.meta?.permission) {
if (hasPermission(to.meta.permission, permissions)) {
next(); // 有权限,放行
} else {
next('/403'); // 无权限,跳转到 403 页面
}
} else {
next(); // 默认放行
}
});
5,登录后设置动态路由
在用户登录成功后,调用 setupDynamicRoutes
设置动态路由。
// Login.vue
<template>
<button @click="handleLogin">登录</button>
</template>
<script>
import { setupDynamicRoutes } from '@/permission';
export default {
methods: {
async handleLogin() {
await this.$store.dispatch('login', { username: 'admin', password: '123456' });
setupDynamicRoutes(); // 设置动态路由
this.$router.push('/dashboard'); // 跳转到首页
},
},
};
</script>
6,动态渲染菜单
根据用户权限动态生成侧边栏菜单。
<template>
<div>
<ul>
<li v-for="route in accessRoutes" :key="route.path">
<router-link :to="route.path">{{ route.meta.title }}</router-link>
</li>
</ul>
</div>
</template>
<script>
export default {
computed: {
accessRoutes() {
return filterRoutes(routes, this.$store.state.permissions);
},
},
};
</script>
或者这样实现。permissions是计算属性,从vuex中取出来的。
</a-menu>
<a-menu-item
key="serverResourceManager"
v-if="permissions.includes('服务器资源管理')"
>
<router-link :to="{ name: 'serverResourceManager' }">服务器资源管理</router-link>
</a-menu-item>
<a-menu-item
key="resourceRequestList"
v-if="permissions.includes('资源申请列表')"
>
<router-link :to="{ name: 'resourceRequestList' }">资源申请列表</router-link>
</a-menu-item>
</a-menu>
四、适用场景
企业管理后台:不同角色(管理员、员工)访问不同功能模块。
CMS 系统:编辑、审核、发布等权限分离。
多租户 SaaS 系统:不同租户自定义角色和权限。
五、总结
核心流程:用户登录 → 获取权限 → 动态生成路由 → 控制 UI 元素。
安全原则:前端控制用户体验,后端兜底校验。
优化方向:减少请求次数、按需加载权限、Token 短期有效。
通过 RBAC 模型,可以实现灵活的权限管理,适用于复杂的企业级应用。实际开发中需结合具体业务场景调整方案。
项目中,尤其是管理后台必不可少的一个环节就是权限设计。通常一个系统下的不同用户会对应不同的角色,不同角色会对应不同的组织。在进入到管理里后台的时候会去请求对应的权限接口,这个接口里有和后台约定好的权限标识内容,如果权限管理不是很复杂,可以将当前用户的所有权限标识一次性返回,前端进行一个持久化存储,之后根据规则处理即可。如果是个极为复杂的权限管理,甚至存在不同操作导致同一用户对应后续流程权限变化的情况,这里就建议用户首次登录管理后台时,获取的是最高一层权限,即可以看到的页面权限,之后在用户每次做了不同操作,切换页面的时候,根据约定好的规则,在页面路由切换的时候去请求下一个页面对应的权限(可以精确到每个交互动作),这样能更加精确的管理权限。