前端权限控制

前端权限控制

一、路由权限（控制页面访问）

• vue

// router.js
const routes = [{path: '/dashboard',name: 'Dashboard',component: () => import('@/views/Dashboard.vue'),meta: { requiresAuth: true, roles: ['admin', 'manager'] }},{path: '/user',name: 'User',component: () => import('@/views/User.vue'),meta: { requiresAuth: true, roles: ['admin'] }},{path: '/login',name: 'Login',component: () => import('@/views/Login.vue')}
];const router = new VueRouter({routes
});// 路由守卫
router.beforeEach((to, from, next) => {const userRole = getUserRole();  // 获取当前用户角色if (to.meta.requiresAuth && !isLoggedIn()) {next('/login');  // 如果需要登录，且用户未登录，跳转到登录页面} else if (to.meta.roles && !to.meta.roles.includes(userRole)) {next('/403');  // 如果用户角色不匹配，跳转到无权限页面} else {next();  // 继续访问}
});export default router;

• react

// App.js
import { Route, Redirect } from 'react-router-dom';const ProtectedRoute = ({ component: Component, roles, ...rest }) => {const userRole = getUserRole();  // 获取当前用户角色return (<Route{...rest}render={props =>userRole && roles.includes(userRole) ? (<Component {...props} />) : (<Redirect to="/403" />)}/>);
};// 使用示例
<ProtectedRoutepath="/admin"roles={['admin']}component={AdminDashboard}
/>

二、界面元素控制（按钮、菜单显示控制）

• vue

<!-- 在模板中根据用户角色来显示不同的元素 -->
<template><div><button v-if="hasPermission('edit')">编辑</button><button v-if="hasPermission('delete')">删除</button></div>
</template><script>
export default {methods: {hasPermission(permission) {const userPermissions = getUserPermissions();  // 获取用户权限列表return userPermissions.includes(permission);  // 判断是否有该权限}}
};
</script>

• react

const Button = ({ permission, children }) => {const userPermissions = getUserPermissions();  // 获取用户权限if (!userPermissions.includes(permission)) {return null;  // 如果没有权限，返回 null，不显示该按钮}return <button>{children}</button>;
};// 使用示例
<Button permission="edit">编辑</Button>
<Button permission="delete">删除</Button>

三、前端权限控制与后端配合

前端权限控制并不是完全安全的，前端的权限控制通常是为了优化用户体验，防止用户在没有权限的情况下看到不应该看到的内容。但真正的权限验证应该在后端进行。

• 前端： 前端通过 API 调用时会携带用户的认证信息（如 JWT Token 或 Session），然后前端判断是否显示相应的功能、页面等。

• 后端： 后端在收到请求时，验证请求中的认证信息，并根据用户的角色和权限返回合适的数据。如果用户没有权限，应该返回 401（未授权）或 403（禁止访问）状态。

四、前端权限存储与管理

• LocalStorage / SessionStorage：用于存储用户的权限信息、角色等。注意：由于这些存储机制容易被客户端修改，因此只能用于界面展示的控制，不适合存储敏感信息。

• Cookies：也可以用于存储权限信息，尤其是在与后端配合时，使用 Cookie 存储会更加安全，通常与会话管理（如 JWT）一起使用。

• Context / Redux / Vuex：用于在应用中全局管理用户权限，确保在各个组件之间共享权限数据。

五、权限优化和安全性注意

• 权限验证要和后端验证配合：前端的权限控制只能起到用户体验的作用，真正的安全性和数据访问控制必须由后端来做。
• 最小权限原则：每个用户仅应有执行其工作所需的最小权限，不要将过多的权限授予给用户。
• 动态权限控制：有时权限可能会变化，前端可以通过 API 动态获取权限列表并更新 UI。