SpringBoot3+vue3实现权限控制

分析一下:角色权限都需要做那些东西? 或者说那些地方需要权限来控制?

在做设计的过程中,最常见的无外乎有以下几点:

1.菜单部分: 不同的角色可以看到不一样的菜单,甚至菜单的名字叫法都不一样

2.按钮部分: 涉及到具体的功能业务逻辑了,比如管理员可以新增但是用户不可以

3.数据部分: 管理员可以看到所有的数据,而用户只能看到自己的数据(到关联的时候会讲 也很简单)

权限怎么做? (思路)

1.我们得有角色的概念,什么叫角色? 但凡你需要他登录的,都可以认为他是角色

2.我们怎么去区分不同的角色呢? 是不是在不同的角色表里需要有一个角色的标识,而且不同的角色他的标识不一样,这样才能用角色标识来区分.比如ADMIN和USER

3.我们借助这个角色标识,就可以在页面上或后端进行一些逻辑判断了.

怎么实现?

v-if

1
<el-menu-item index="/manager/notice" v-if="data.user.role === 'ADMIN'">系统公告</el-menu-item>

image-20250305160321322.png

同理在用户管理这里也加上

1
2
3
4
5
6
7
8
<el-sub-menu index="2" v-if="data.user.role === 'ADMIN'">
            <template #title>
              <el-icon><User /></el-icon>
              <span>用户管理</span>
            </template>
            <el-menu-item index="/manager/admin">管理员信息</el-menu-item>
            <el-menu-item index="/manager/user">普通用户信息</el-menu-item>
          </el-sub-menu>

也可以让名字不同

1
2
<el-menu-item index="/manager/notice" v-if="data.user.role === 'ADMIN'">系统公告</el-menu-item>
            <el-menu-item index="/manager/notice" v-else>公告信息</el-menu-item>

假如直接调用呢?那怎么处理?

后端可以处理

1
2
3
4
5
6
7
8
9
public void add(Notice notice) {
        //获取当前的用户
        Account currentUser = TokenUtils.getCurrentUser();
        if("USER".equals(currentUser.getRole())){
            throw new CustomerException("500","您的角色暂无权限该操作");
        }
        notice.setTime(DateUtil.now());
        noticeMapper.insert(notice);
    }

同理对修改和删除一样的操作 然后开放新增接口来进行测试

image-20250305161919811.png

用后端双保险,这也是最简单的权限控制了

第三部分后面的文章会讲

你可以在页面上的任何地方为所欲为,用v-if即可

如果想让不同角色看到公告内容不一样要怎么操作

1
2
3
4
5
6
<el-table-column prop="content" label="公告内容">
          <template v-slot="scope">
            <span v-if="data.user.role === 'ADMIN'">{{ scope.row.content }}</span>
            <span v-if="data.user.role === 'USER'">您暂无权限查看</span>
          </template>
        </el-table-column>

后续可以学习SpringSecurity