权限控制通过角色或权限码实现，前端根据用户权限动态控制界面显示与路由访问。1. 基于角色判断用户是否有权访问特定功能；2. 使用权限码实现细粒度控制，如 'edit:post'；3. 路由守卫拦截无权访问路径；4. 封装指令控制DOM元素渲染。需妥善管理权限数据并处理登录状态变化。
权限控制在前端通常用于控制用户界面的显示逻辑和路由访问，JavaScript 可以通过用户角色、权限标识或后端返回的权限列表来实现。核心思路是根据用户的权限动态控制页面元素的可见性或路由跳转行为。
1. 基于用户角色的权限判断
最常见的方式是根据用户的角色（如 admin、editor、guest）来决定能否访问某些功能。
示例代码：
const user = {
name: 'Alice',
role: 'editor'
};
function hasRole(role) {
return user.role === role;
}
// 使用
if (hasRole('admin')) {
showDeleteButton();
}
也可以支持多角色：
立即学习“Java免费学习笔记（深入）”；
const user = {
roles: ['user', 'editor']
};
function hasAnyRole(roles) {
return roles.some(role => user.roles.includes(role));
}
if (hasAnyRole(['admin', 'editor'])) {
enableEditFeature();
}
2. 基于权限码的细粒度控制
更精细的控制可以使用权限码（permission code），比如 'create:user', 'delete:post' 等。
示例：
const permissions = ['read:post', 'edit:post'];
function hasPermission(permission) {
return permissions.includes(permission);
}
// 控制按钮显示
if (hasPermission('edit:post')) {
document.getElementById('editBtn').style.display = 'block';
}
这类权限通常由后端登录后返回，前端存储在 localStorage 或状态管理中。
3. 路由级别的权限控制
在单页应用中，可以通过拦截路由跳转实现权限限制。
以 Vue 或 React 为例，可以在路由守卫中判断：
// 模拟路由跳转前的检查
function navigate(to, from, next) {
const routeMeta = {
'/admin': { requiresAuth: true, role: 'admin' },
'/editor': { requiresAuth: true, permission: 'edit:post' }
};
const target = routeMeta[to];
if (target?.requiresAuth) {
if (!isLoggedIn()) {
next('/login');
return;
}
if (target.role && !hasRole(target.role)) {
next('/forbidden');
return;
}
if (target.permission && !hasPermission(target.permission)) {
next('/forbidden');
return;
}
}
next();
}
4. DOM 元素的权限指令（可选封装）
可以封装一个简单的指令来控制元素渲染。
function vCan(permission) {
return function(element) {
if (!hasPermission(permission)) {
element.parentNode.removeChild(element);
}
};
}
// 使用
const btn = document.getElementById('saveBtn');
vCan('create:post')(btn);
这样在模板中可通过自定义方式控制元素是否显示。
基本上就这些。关键是把权限数据管理好，结合业务场景灵活判断。不复杂但容易忽略细节，比如退出登录后清权限、接口返回更新权限等。
