1. 接口权限控制

接口权限控制通常通过 JWT（JSON Web Token）实现。后端通过 JWT 插件生成 token，前端将 token 存储，并在每次请求时通过 Authorization 字段发送给后端进行验证。

实现步骤：

• 前端处理：在每次请求时，将 token 放入请求头中；
• 后端验证：后端接收到请求后，验证 token 的有效性；
• Token 失效处理：如果 token 失效（如 401 错误），前端需要重定向到登录页面。

代码示例：

javascript代码解读复制代码  axios.interceptors.request.use((config) => {             // 在请求头中添加 token             config.headers['Authorization'] = localStorage.getItem('token')             return config         })          axios.interceptors.response.use(             (res) => res,             ({ response }) => {                 if (response.status === 401) {                     // 如果是未认证的用户，跳转到登录页面                     router.push('/login')                 } else if (response.status === 403) {                     // 如果是没有权限访问，提示无权限                     router.push('/unauthorized')                 }             }         )

2. 路由权限控制

路由权限控制确保不同用户根据其角色访问不同的页面或功能模块。实现路由权限控制有两种常见方案：

方案一：后端动态返回路由配置

后端根据用户角色返回不同的路由表，前端根据后端返回的路由动态生成路由配置。这种方式适合需要灵活管理权限的场景，路由配置完全由后端控制。

实现思路

1. 后端返回路由配置：后端在用户登录成功后，根据用户的角色或权限，返回一份包含该用户可以访问的路由表的 JSON 数据；
2. 前端接收路由配置：前端通过 API 调用后端的接口，获取路由配置；
3. 前端生成路由：前端通过 Vue Router 动态添加路由，将后端返回的路由表注入到 Vue Router 中；
4. 渲染页面：前端根据动态添加的路由，展示用户可以访问的页面。

javascript代码解读复制代码[ { "path": "/dashboard", "name": "Dashboard",  "component": "DashboardComponent" }],    // 定义一个组件映射表，来将后端返回的组件名映射到前端的实际组件         const componentMap = {             DashboardComponent: () => import('@/views/Dashboard.vue'),             ProfileComponent: () => import('@/views/Profile.vue'),         }           // 动态生成并注册路由         async function createAppRouter() {             const routeData = await fetchRoutes() // 调接口获取后端返回的路由表              // 根据路由数据生成 Vue Router 路由配置             const routes = routeData.map((route) => ({                 path: route.path,                 name: route.name,                 component: componentMap[route.component], // 动态加载组件             }))              // 创建 Vue Router 实例             const router = createRouter({                 history: createWebHistory(),                 routes: [], // 初始路由为空             })              // 动态添加每一条路由             routes.forEach((route) => {                 router.addRoute(route)             })              return router         }

方案二：前端基于角色的路由表

1. 前端预先配置好完整的路由表，并通过在 meta 对象中设置 roles 属性来指定哪些角色可以访问某些路由；
2. 通过 Vue Router 的导航守卫 beforeEach() 来进行权限校验，拦截不符合权限的访问请求。

javascript代码解读复制代码jsx 复制代码 const routerMap = [   {     path: '/permission',     component: Layout,     meta: {       title: 'permission',       roles: ['admin', 'editor'] // 允许的角色     },     children: [       {         path: 'page',         component: () => import('@/views/permission/page'),         meta: {           title: 'pagePermission',           roles: ['admin'] // 只有管理员可访问         }       }     ]   } ];     router.beforeEach((to, from, next) => {             const userRole = localStorage.getItem('userRole')             if (to.meta.roles && !to.meta.roles.includes(userRole)) {                 // 如果用户角色不在路由的 roles 中，跳转到无权限页面                 next('/unauthorized')             } else {                 // 否则正常跳转                 next()             }         })

3. 按钮权限控制

在某些场景下，除了页面级别的权限控制，按钮级别的权限控制也是常见需求。通过自定义指令，可以根据用户的权限动态控制按钮的显示与隐藏。

实现方式：

1. 通过自定义指令 v-has 来控制按钮是否显示；
2. 根据用户角色，判断当前用户是否有权限执行某个操作（如编辑、删除等）。

javascript代码解读复制代码jsx 复制代码    Vue.directive('has', {             inserted(el, binding, vnode) {                 const userPermissions = vnode.context.$store.getters.userPermissions // 获取用户权限                 const requiredPermission = binding.value// 这里的值是 'edit'                  // 如果没有权限，隐藏按钮                 if (!userPermissions.includes(requiredPermission)) {                     el.parentNode && el.parentNode.removeChild(el); // 移除元素                 }             },       })  // 在模板中使用自定义指令 <button v-has="'edit'">编辑</button>

结语

前端权限控制不仅仅是页面和路由的访问权限，还包括按钮、操作权限的细粒度控制。它与后端的权限体系相辅相成，前端负责用户体验的优化与增强，而后端则负责核心的权限认证与校验。在实际项目中，合理设计权限系统可以提高系统的安全性、灵活性和可维护性。通过接口、路由和按钮的权限控制机制，前端开发者可以构建一个更加安全、用户友好的应用系统。