前端实现权限管理的详细方案(动态路由、接口鉴权、UI 控制 )

发布于:2025-03-08 ⋅ 阅读:(33) ⋅ 点赞:(0)

在前端配合后端 RBAC(基于角色的访问控制) 实现权限管理,需要结合 动态路由接口鉴权UI 控制 等技术。

一、RBAC 权限模型

1. 核心概念

  • 用户(User):系统的使用者(如张三、李四)。

  • 角色(Role):权限的集合(如管理员、普通用户)。

  • 权限(Permission):具体操作的最小单元(如 user:addorder:delete)。

  • 角色-权限映射:角色与权限的关联关系(如管理员拥有 user:add 和 user:delete)。

2. 后端接口设计

  • 用户登录:返回用户的角色和权限列表。

  • 获取角色权限:根据角色 ID 获取权限列表。

  • 鉴权接口:校验用户是否有权限执行某个操作。

二、动态路由的核心思想

  • 静态路由:在项目初始化时定义所有路由。

  • 动态路由:在运行时根据用户权限或其他条件动态生成路由。

1,动态路由的实现流程

  1. 用户登录后,获取用户的权限信息。

  2. 根据权限信息,筛选出用户有权限访问的路由。

  3. 使用 router.addRoute(Vue Router 4)或 router.addRoutes(Vue Router 3)动态添加路由。

  4. 在路由跳转时,通过路由守卫校验用户权限。

2,动态路由的优势

  1. 灵活性:根据用户权限动态生成路由,适应不同角色的需求。

  2. 安全性:通过路由守卫和动态路由,确保用户只能访问有权限的页面。

  3. 可维护性:将权限控制和路由管理分离,便于扩展和维护。

3, 总结

  • 动态路由 是实现权限控制的核心技术之一。

  • 通过动态生成路由和路由守卫校验,可以实现灵活的权限控制。

  • 动态路由的实现步骤包括:定义路由、获取权限、筛选路由、动态添加路由、校验权限。

三、前端权限管理实现

  • 关键原则:前端权限控制只是辅助,所有敏感操作必须由后端严格鉴权

  • 实现步骤

    1. 用户修改本地权限数据后,可以绕过前端路由跳转,进入本不该访问的页面。

    2. 但该页面初始化时,会自动调用后端接口(如获取列表数据)。

    3. 后端对每个接口进行权限校验,发现无权限时返回 403 错误码。

    4. 前端拦截 403 错误,强制跳转到无权限提示页或登录页。

注意:以下是一个完整的动态路由实现示例,基于 Vue Router 4 和 Vuex。

1,定义所有路由

在项目中定义所有可能的路由,包括需要权限控制的动态路由和公共路由

// router.js
import { createRouter, createWebHistory } from 'vue-router';

// 公共路由(无需权限)
const publicRoutes = [
  {
    path: '/login',
    component: () => import('@/views/Login.vue'),
    meta: { isPublic: true }, // 标记为公共路由
  },
  {
    path: '/403',
    component: () => import('@/views/403.vue'),
    meta: { isPublic: true }, // 标记为公共路由
  },
];

// 动态路由(需要权限)
const dynamicRoutes = [
  {
    path: '/dashboard',
    component: () => import('@/views/Dashboard.vue'),
    meta: { permission: 'dashboard_view' }, // 需要权限
  },
  {
    path: '/profile',
    component: () => import('@/views/Profile.vue'),
    meta: { permission: 'profile_view' }, // 需要权限
  },
  {
    path: '/admin',
    component: () => import('@/views/Admin.vue'),
    meta: { permission: 'admin_access' }, // 需要权限
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes: publicRoutes, // 初始化时只添加公共路由
});

export { router, dynamicRoutes };

2,用户登录后获取权限

用户登录后,从后端获取权限信息,并存储在 Vuex 中。

// user.js
import { createStore } from 'vuex';

const user = createStore({
  state: {
    user: null,
    permissions: [], // 用户权限列表
  },
  mutations: {
    setUser(state, user) {
      state.user = user;
    },
    setPermissions(state, permissions) {
      state.permissions = permissions;
    },
  },
  actions: {
    async login({ commit }, { username, password }) {
      const userInfo = await api.login(username, password);
      const permissions = await api.getPermissions(userInfo.role);
      commit('setUser', userInfo);
      commit('setPermissions', permissions);
    },
  },
});

export default user;

3,动态生成路由

根据用户权限动态生成路由表,并添加到路由实例中。

// permission.js
import { router, dynamicRoutes } from './router';
import store from './store';

// 检查用户是否有权限
function hasPermission(permission, permissions) {
  return permissions.includes(permission);
}

// 筛选出用户有权限访问的路由
function filterRoutes(routes, permissions) {
  return routes.filter(route => {
    if (route.meta?.isPublic) {
      return true; // 公共路由,无需权限
    }
    if (route.meta?.permission) {
      return hasPermission(route.meta.permission, permissions); // 校验权限
    }
    return true; // 默认允许访问
  });
}

// 动态添加路由
export function setupDynamicRoutes() {
  const permissions = store.state.permissions;
  const accessRoutes = filterRoutes(dynamicRoutes, permissions);
  accessRoutes.forEach(route => router.addRoute(route));
}

4,路由守卫校验权限

在路由跳转时,校验用户是否有权限访问目标路由。

// permission.js
router.beforeEach((to, from, next) => {
  const permissions = store.state.permissions;
  if (to.meta?.isPublic) {
    next(); // 公共路由,直接放行
  } else if (to.meta?.permission) {
    if (hasPermission(to.meta.permission, permissions)) {
      next(); // 有权限,放行
    } else {
      next('/403'); // 无权限,跳转到 403 页面
    }
  } else {
    next(); // 默认放行
  }
});

5,登录后设置动态路由

在用户登录成功后,调用 setupDynamicRoutes 设置动态路由。

// Login.vue
<template>
  <button @click="handleLogin">登录</button>
</template>

<script>
import { setupDynamicRoutes } from '@/permission';

export default {
  methods: {
    async handleLogin() {
      await this.$store.dispatch('login', { username: 'admin', password: '123456' });
      setupDynamicRoutes(); // 设置动态路由
      this.$router.push('/dashboard'); // 跳转到首页
    },
  },
};
</script>

6,动态渲染菜单

根据用户权限动态生成侧边栏菜单。

<template>
  <div>
    <ul>
      <li v-for="route in accessRoutes" :key="route.path">
        <router-link :to="route.path">{{ route.meta.title }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  computed: {
    accessRoutes() {
      return filterRoutes(routes, this.$store.state.permissions);
    },
  },
};
</script>

或者这样实现。permissions是计算属性,从vuex中取出来的。

</a-menu>
    <a-menu-item
       key="serverResourceManager"
       v-if="permissions.includes('服务器资源管理')"
     >
         <router-link :to="{ name: 'serverResourceManager' }">服务器资源管理</router-link>
     </a-menu-item>
     <a-menu-item
         key="resourceRequestList"
         v-if="permissions.includes('资源申请列表')"
      >
          <router-link :to="{ name: 'resourceRequestList' }">资源申请列表</router-link>
      </a-menu-item>
</a-menu>

四、适用场景

  1. 企业管理后台:不同角色(管理员、员工)访问不同功能模块。

  2. CMS 系统:编辑、审核、发布等权限分离。

  3. 多租户 SaaS 系统:不同租户自定义角色和权限。

五、总结

  • 核心流程:用户登录 → 获取权限 → 动态生成路由 → 控制 UI 元素。

  • 安全原则:前端控制用户体验,后端兜底校验。

  • 优化方向:减少请求次数、按需加载权限、Token 短期有效。

通过 RBAC 模型,可以实现灵活的权限管理,适用于复杂的企业级应用。实际开发中需结合具体业务场景调整方案。

项目中,尤其是管理后台必不可少的一个环节就是权限设计。通常一个系统下的不同用户会对应不同的角色,不同角色会对应不同的组织。在进入到管理里后台的时候会去请求对应的权限接口,这个接口里有和后台约定好的权限标识内容,如果权限管理不是很复杂,可以将当前用户的所有权限标识一次性返回,前端进行一个持久化存储,之后根据规则处理即可。如果是个极为复杂的权限管理,甚至存在不同操作导致同一用户对应后续流程权限变化的情况,这里就建议用户首次登录管理后台时,获取的是最高一层权限,即可以看到的页面权限,之后在用户每次做了不同操作,切换页面的时候,根据约定好的规则,在页面路由切换的时候去请求下一个页面对应的权限(可以精确到每个交互动作),这样能更加精确的管理权限。


网站公告

今日签到

点亮在社区的每一天
去签到