在前端开发中，权限控制是一个重要的功能，确保不同用户根据其权限访问不同的资源或功能。本文将介绍如何通过接口权限、路由权限和按钮权限控制来实现前端的完整权限体系。

1.接口权限控制

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

实现步骤：

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

代码示例：

  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. 渲染页面：前端根据动态添加的路由，展示用户可以访问的页面。

[ { "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() 来进行权限校验，拦截不符合权限的访问请求。

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. 根据用户角色，判断当前用户是否有权限执行某个操作（如编辑、删除等）。

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>

结语

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