前端权限控制的核心在于拦截导航并根据角色决定访问权限。主要方案包括：1. 全局路由守卫，适用于全局性控制，简单易用但可能影响性能；2. 组件内路由守卫，粒度更细但代码分散不易维护；3. 独享路由守卫，针对特定路由灵活控制但配置繁琐；4. 自定义路由守卫，高度灵活但实现复杂。权限数据通常通过 localstorage、sessionstorage、cookies 或内存存储，动态权限则可通过实时请求或 websocket 获取更新，以确保权限准确性与系统安全性。
前端权限控制，简单来说，就是限制用户访问他们不应该访问的页面或功能。JS 在这方面扮演着核心角色，通过路由守卫等技术手段，决定用户能否进入某个页面。
解决方案
JS 实现前端权限控制，核心在于拦截用户的导航行为，并根据用户的角色或权限信息，决定是否允许其访问目标页面。常见的实现方式就是路由守卫，它就像一个门卫，在用户试图进入某个页面之前，检查其是否有相应的通行证。
如何选择合适的路由守卫方案？
选择哪种路由守卫方案，取决于你的项目复杂度和具体需求。如果只是简单的权限控制，比如区分普通用户和管理员，那么全局路由守卫可能就足够了。但如果需要更精细的控制，比如基于角色的权限控制，或者动态权限控制，那么组件内路由守卫或自定义路由守卫可能更合适。
立即学习“前端免费学习笔记（深入）”；
全局路由守卫 (Global Guards)
这是最常见的路由守卫方案，它会在每次路由跳转之前或之后执行。你可以使用 vue router 或 React Router 等路由库提供的 API 来实现。
- 优点: 简单易用，适用于全局性的权限控制。
- 缺点: 所有路由跳转都会触发，可能会影响性能。
示例 (Vue Router):
router.beforeEach((to, from, next) => { const isAuthenticated = localStorage.getItem('token'); // 假设token存在表示已登录 const requiresAuth = to.meta.requiresAuth; // 路由元信息中是否需要登录 if (requiresAuth && !isAuthenticated) { next('/login'); // 未登录，跳转到登录页 } else { next(); // 已登录或不需要登录，继续跳转 } });
组件内路由守卫 (Component Guards)
这种方案将权限控制逻辑放在组件内部，只有当组件被激活时才会执行。
- 优点: 粒度更细，可以针对特定组件进行权限控制。
- 缺点: 代码分散在各个组件中，不易维护。
示例 (Vue):
<template> <div> <h1>需要权限才能访问的页面</h1> </div> </template> <script> export default { beforeRouteEnter (to, from, next) { const isAuthenticated = localStorage.getItem('token'); if (!isAuthenticated) { next('/login'); } else { next(); } } } </script>
独享路由守卫 (Per-Route Guards)
针对特定路由配置的守卫，可以更精细地控制某个路由的访问权限。
- 优点: 灵活性高，可以针对特定路由进行定制化的权限控制。
- 缺点: 需要在路由配置中进行设置，相对繁琐。
示例 (React Router v6):
import { useRoutes } from "react-router-dom"; function RequireAuth({ children }) { const isAuthenticated = localStorage.getItem('token'); // 假设有一个登录页面组件 return isAuthenticated ? children : <Navigate to="/login" />; } let routes = useRoutes([ { path: "/protected", element: <RequireAuth><ProtectedPage /></RequireAuth>, // ProtectedPage 需要权限才能访问 }, { path: "/login", element: <LoginPage />, }, ]);
自定义路由守卫 (Custom Guards)
如果以上方案都无法满足你的需求，可以自定义路由守卫。这种方案灵活性最高，但实现也最复杂。
- 优点: 可以根据具体需求进行定制化的权限控制。
- 缺点: 实现复杂，需要深入理解路由机制。
如何处理权限数据？
权限数据通常存储在服务器端，前端需要在用户登录后获取权限数据，并将其存储在本地。常见的存储方式有：
- LocalStorage: 简单易用，但安全性较低，不适合存储敏感信息。
- SessionStorage: 关闭浏览器后数据会丢失，适合存储临时性的权限信息。
- Cookies: 可以设置过期时间，但大小有限制。
- 内存 (vuex/redux): 数据存储在内存中，刷新页面后会丢失，适合存储临时性的权限信息。
选择哪种存储方式，取决于你的项目需求和安全考虑。对于敏感的权限信息，建议使用服务器端 Session 或 JWT 等安全机制。
如何应对动态权限？
有些场景下，用户的权限可能会动态变化，比如管理员修改了用户的角色。这时，前端需要及时更新权限数据，并重新进行权限控制。
一种常见的做法是，在用户每次访问需要权限的页面时，都向服务器端发送请求，获取最新的权限数据。这种方式可以保证权限数据的实时性，但会增加服务器端的压力。
另一种做法是，使用 WebSocket 等技术，服务器端在权限发生变化时，主动通知前端更新权限数据。这种方式可以减少服务器端的压力，但实现相对复杂。
