SpringBoot-Shiro-Vue项目前端权限控制机制深度解析

洪赫逊

于 2025-06-09 09:02:34 发布

阅读量369

点赞数 5

本文链接：https://blog.youkuaiyun.com/gitblog_00613/article/details/148523866

版权

SpringBoot-Shiro-Vue项目前端权限控制机制深度解析

SpringBoot-Shiro-Vue 提供一套基于Spring Boot-Shiro-Vue的权限管理思路.前后端都加以控制,做到按钮/接口级别的权限。（当前新版本已移除shiro依赖，简化了配置）项目地址: https://gitcode.com/gh_mirrors/sp/SpringBoot-Shiro-Vue

前言

在现代Web应用开发中，权限控制是保障系统安全的重要环节。本文将深入分析SpringBoot-Shiro-Vue项目中前端权限控制的实现机制，帮助开发者理解如何在前端实现精细化的权限管理。

整体架构概述

该项目采用前后端分离架构，前端基于Vue.js实现，权限控制主要分为两部分：

路由级别的权限控制 - 控制用户能访问哪些页面
元素级别的权限控制 - 控制页面内具体元素的显示

路由权限实现机制

路由分类

项目中的路由分为两大类：

静态路由：所有用户均可访问的基础路由，如登录页(/login)、404页面等
动态路由：根据用户权限动态生成的路由，存储在asyncRouterMap中

动态路由生成流程

权限校验触发
通过vue-router的全局拦截器(permission.js)检测用户状态。如果用户已登录但未获取权限信息，则触发权限获取流程。

获取用户权限
从后端API获取用户权限数据，典型响应格式如下：

{
  "menuList": ["role", "user", "article"],
  "roleId": 1,
  "nickname": "超级用户",
  "roleName": "管理员",
  "permissionList": ["article:list", "article:add", "user:list"],
  "userId": 10003
}

路由动态生成
将用户权限与预设的asyncRouterMap进行比对，筛选出用户有权访问的路由。关键比对属性是路由配置中的menu字段。
路由注入
使用vue-router的addRoutes方法将生成的路由动态添加到路由器实例中。

设计思考

为什么不直接在登录时返回权限信息？
因为页面刷新会导致Vuex中的状态丢失，需要重新获取权限信息。当然也可以考虑将权限信息持久化到cookie或localStorage中。

元素权限控制实现

基础实现方式

在模板中使用v-if指令配合hasPerm方法控制元素显示：

<button v-if="hasPerm('article:add')">新增文章</button>

hasPerm方法原理很简单，就是检查当前用户的permissionList是否包含指定权限：

function hasPermission(permission) {
  return store.getters.permissions.indexOf(permission) > -1;
}

进阶实现方式

项目在v2.0.0版本引入了v-permission指令，语法更简洁：

<button v-permission="'article:add'">新增文章</button>

最佳实践建议

权限粒度控制
建议将权限控制在合理的粒度，既不过于粗放导致安全性问题，也不过于细致增加维护成本。
权限缓存策略
对于频繁访问的页面，可以考虑将权限信息缓存在localStorage中，减少API请求。
服务端兜底校验
前端权限控制只是用户体验优化，必须在服务端进行严格的权限校验。
权限变更处理
考虑实现权限变更时的实时通知机制，避免用户权限已变更但前端仍保留旧权限的情况。

总结

SpringBoot-Shiro-Vue项目实现了一套完整的前端权限控制方案，通过动态路由生成和元素级权限控制，既保障了系统安全性，又提供了良好的用户体验。理解这套机制有助于开发者在实际项目中实现灵活、安全的权限管理系统。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考