前端开发遇到的一些权限控制问题_前端处理权限怎么设置-CSDN博客

本文链接：https://blog.csdn.net/csdn_wzq/article/details/144180258

摘要

在前端开发中，权限控制是一个重要的功能，确保不同用户根据其权限访问不同的资源或功能。但是前端只能做一些基础的权限控制，想做到万无一失的权限访问控制必须后端进行配合，下面和大家分享一下自己在项目中用到的权限控制方式，开发语言使用Vue。

一、接口权限控制

通过 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')
                }
            }
        )

二、路由权限控制

1.后端动态返回路由配置

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

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

示例：

[ { "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
        }

2.前端基于角色的路由表

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

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()
            }
        })

三、按钮权限控制

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

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

jsx
复制代码
   Vue.directive('hasPer', {
            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-hasPer="'edit'">编辑</button>