基于若依前端实现登录到页面按钮的权限控制

基于若依前端实现登录到页面按钮的权限控制

权限控制流程概述

若依框架采用RBAC（基于角色的权限控制）模型，权限控制贯穿从登录到页面渲染的全过程。前端通过Vue + Vuex + Vue Router实现动态路由和按钮级权限，后端通过Spring Security进行接口权限校验。

登录与权限初始化

用户登录成功后，后端返回token和用户权限信息。前端将权限数据存储到Vuex中，并生成动态路由。关键代码在src/store/modules/permission.js：

// 动态生成路由
const actions = {
  generateRoutes({ commit }, roles) {
    return new Promise(resolve => {
      let accessedRoutes
      if (roles.includes('admin')) {
        accessedRoutes = asyncRoutes || []
      } else {
        accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
      }
      commit('SET_ROUTES', accessedRoutes)
      resolve(accessedRoutes)
    })
  }
}

路由权限控制

路由级权限通过router.beforeEach拦截实现，检查路由的meta.roles属性是否匹配当前用户角色。关键代码在src/permission.js：

router.beforeEach(async(to, from, next) => {
  const hasRoles = store.getters.roles && store.getters.roles.length > 0
  if (hasRoles) {
    next()
  } else {
    const { roles } = await store.dispatch('user/getInfo')
    const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
    router.addRoutes(accessRoutes)
    next({ ...to, replace: true })
  }
})

页面按钮权限控制

按钮级权限使用自定义指令v-hasPermi或v-hasRole实现。指令定义在src/directive/permission/hasPermi.js：

import store from '@/store'

export default {
  inserted(el, binding, vnode) {
    const { value } = binding
    const all_permission = "*:*:*"
    const permissions = store.getters && store.getters.permissions

    if (value && value instanceof Array && value.length > 0) {
      const permissionFlag = value
      const hasPermissions = permissions.some(permission => {
        return all_permission === permission || permissionFlag.includes(permission)
      })

      if (!hasPermissions) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else {
      throw new Error(`请设置操作权限标签值`)
    }
  }
}

按钮权限使用示例

在模板中使用权限指令控制按钮显示：

<el-button v-hasPermi="['system:user:add']">新增用户</el-button>
<el-button v-hasRole="['admin']">管理员操作</el-button>

权限数据格式规范

后端返回的权限数据格式应包含：

{
  "roles": ["admin"],
  "permissions": ["system:user:add", "system:user:edit"]
}

动态菜单生成

侧边栏菜单通过src/layout/components/Sidebar组件动态生成，基于router.js中配置的路由meta.roles属性过滤：

{
  path: '/system/user',
  component: Layout,
  meta: {
    title: '用户管理',
    icon: 'user',
    roles: ['admin']
  }
}

权限缓存处理

权限信息应持久化到localStorage，避免刷新页面丢失。关键代码在src/utils/auth.js：

export function getToken() {
  return Cookies.get(TokenKey)
}

export function setToken(token) {
  return Cookies.set(TokenKey, token)
}

接口权限校验

前端应在src/utils/request.js中统一注入token，后端需校验每个接口的权限：

service.interceptors.request.use(
  config => {
    if (getToken()) {
      config.headers['Authorization'] = 'Bearer ' + getToken()
    }
    return config
  }
)

通过以上实现，若依前端完成了从登录认证到按钮级权限的全流程控制。开发者只需关注权限配置，框架会自动处理权限校验和界面渲染。