权限管理

前端权限管理的基本流程

1、身份验证

• 登录操作，后端生成认证信息，前端保存

2、权限获取

• 登录后，系统从服务器端获取该用户的权限信息，如角色、权限列表等，前端根据这些权限信息来决定显示哪些页面或功能

3、权限控制

• 根据用户的权限信息，前端应用决定哪些路由、菜单、页面或功能对用户可见，哪些操作对用户开放或禁用

权限管理场景方法

基于路由：路由守卫

Navigation Guards

在单页应用中，路由是前端应用的核心部分，通过路由进行权限控制，可以有效防止用户访问未授权的页面

Vue.js中的路由守卫

// 假设我们有一个权限对象，表示用户的权限信息
const userPermissions = {
  isAdmin: true,
  allowedRoutes: ['/dashboard', '/settings'],
};

// 路由配置
const routes = [
  { path: '/dashboard', component: Dashboard },
  { path: '/settings', component: Settings },
  { path: '/login', component: Login },
];

// 设置全局路由守卫
router.beforeEach((to, from, next) => {
  if (userPermissions.allowedRoutes.includes(to.path)) {
    // 如果用户有权限访问该页面，继续导航
    next();
  } else {
    // 否则，重定向到登录页面或显示“无权限”页面
    next('/login');
  }
});

React中的路由守卫

import { Navigate } from 'react-router-dom';

const PrivateRoute = ({ children, isAuthenticated }) => {
  return isAuthenticated ? children : <Navigate to="/login" />;
};

// 使用 PrivateRoute 来包装需要权限控制的路由
<Route path="/dashboard" element={<PrivateRoute isAuthenticated={isAuthenticated}><Dashboard /></PrivateRoute>} />

基于角色的权限管理

基于角色的权限控制（RBAC，Role-Based Access Control）是前端权限管理中最常见的策略之一，不同的用户角色拥有不同的权限，前端通过角色控制访问权限

const userRole = 'admin'; // 假设我们从服务器获取的用户角色是 "admin"

const routes = [
  {
    path: '/admin',
    component: AdminPage,
    meta: { requiredRole: 'admin' }, // 该路由需要 "admin" 角色
  },
  {
    path: '/user',
    component: UserPage,
    meta: { requiredRole: 'user' }, // 该路由需要 "user" 角色
  },
];

// 路由守卫：根据角色判断是否允许访问
router.beforeEach((to, from, next) => {
  if (to.meta.requiredRole && to.meta.requiredRole !== userRole) {
    // 如果用户角色不匹配，阻止访问
    next('/unauthorized');
  } else {
    // 允许访问
    next();
  }
});

基于权限点的控制

除了基于角色的控制，有时应用可能需要更精细的权限控制，可以通过权限点permission points来管理权限，权限点是对页面或功能的具体操作（如查看、编辑、删除等）进行授权

const userPermissions = ['view_dashboard', 'edit_profile'];

// 基于权限点渲染页面中的按钮
function renderButton() {
  if (userPermissions.includes('edit_profile')) {
    return <button>编辑资料</button>;
  } else {
    return null; // 没有权限，不渲染按钮
  }
}

结合后端进行权限校验

前端权限管理虽然能控制用户看到的页面或功能，但为了安全性，前端权限管理通常需要结合后端校验。即便前端阻止了用户访问未授权页面，但恶意用户仍然可以通过修改前端代码绕过这些限制。

因此，后端必须对每个 API 请求进行权限校验，确保用户有权执行该操作。

后端权限校验流程：

• 用户请求 API 时，携带认证令牌（如 JWT）。

• 后端解析令牌，获取用户身份和权限。

• 校验用户是否有权限访问请求的资源或执行的操作。

前端权限管理的本地存储

前端应用通常会将用户的权限信息保存在客户端（如浏览器的 localStorage 或 sessionStorage 中）。这是为了避免每次都从后端获取权限信息，提升应用的性能。

// 用户登录后，将权限信息存储到 localStorage 中
localStorage.setItem('userPermissions', JSON.stringify(['view_dashboard', 'edit_profile']));

// 在应用中获取权限信息
const userPermissions = JSON.parse(localStorage.getItem('userPermissions'));