前端权限控制
前端权限控制
一、路由权限（控制页面访问）
- 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" />
)
}
/>
);
};
// 使用示例
<ProtectedRoute
path="/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。
原文地址：https://blog.csdn.net/weixin_45932565/article/details/144347383
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！