权限控制-用户管理-天翼云

后端

修改 UserController 添加对应的 CRUD 以及分批角色，删除用户要把对应的角色与用户的关系表数据也紧接着删除掉，代码如下

，如下编写的业务就是 RBAC 了，我就快速的贴代码了，重点是在后面的 Jwt + Security + OAuth2 的知识点

/**
 * <p>
 * 用户表 前端控制器
 * </p>
 *
 * @author BNTang
 * @since 2021-04-21
 */
@RestController
@RequestMapping("/service_auth/admin/user")
@Api(tags = "用户组")
public class UserController {
    @Resource
    private UserService userService;

    @Resource
    private RoleService roleService;

    /**
     * <b>
     * 获取管理用户，分页列表
     * </b>
     */
    @ApiOperation(value = "获取管理用户，分页列表")
    @GetMapping("/getUserList/{page}/{limit}")
    public ResponseResult index(@PathVariable Long page, @PathVariable Long limit, User userQueryVo) {
        IPage<User> pageParam = new Page<>(page, limit);

        QueryWrapper<User> queryWrapper = new QueryWrapper<>();

        if (!StringUtils.isEmpty(userQueryVo.getOpenId())) {
            queryWrapper.like("open_id", userQueryVo.getOpenId());
        }

        IPage<User> pageModel = userService.page(pageParam, queryWrapper);

        return ResponseResult.ok()
                .data("items", pageModel.getRecords())
                .data("total", pageModel.getTotal());
    }

    /**
     * <b>
     * 新增管理用户
     * </b>
     */
    @ApiOperation(value = "新增管理用户")
    @PostMapping("/saveUser")
    public ResponseResult save(@RequestBody User user) {
        user.setPassword(Md5.encrypt(user.getPassword()));
        userService.save(user);
        return ResponseResult.ok();
    }

    /**
     * <b>
     * 修改管理用户
     * </b>
     */
    @ApiOperation(value = "修改管理用户")
    @PostMapping("/updateUser")
    public ResponseResult updateById(@RequestBody User user) {
        user.setPassword(Md5.encrypt(user.getPassword()));
        userService.updateById(user);
        return ResponseResult.ok();
    }

    /**
     * <b>
     * 删除管理用户
     * </b>
     */
    @ApiOperation(value = "删除管理用户")
    @PostMapping("/removeUser/{id}")
    public ResponseResult remove(@PathVariable String id) {
        userService.removeById(id);
        return ResponseResult.ok();
    }

    /**
     * <b>
     * 批量删除用户
     * </b>
     */
    @ApiOperation(value = "批量删除用户")
    @PostMapping("/batchRemoveUser")
    public ResponseResult batchRemove(@RequestBody List<String> idList) {
        userService.removeByIds(idList);
        return ResponseResult.ok();
    }

    /**
     * <b>
     * 根据用户id查询用户
     * </b>
     */
    @ApiOperation(value = "根据用户id查询用户")
    @GetMapping("/getUserById/{id}")
    public ResponseResult getUser(@PathVariable String id) {
        return ResponseResult.ok().data("user", userService.getById(id));
    }

    /**
     * <b>
     * 根据用户ID获取角色数据
     * </b>
     */
    @ApiOperation(value = "根据用户ID获取角色数据")
    @GetMapping("/getUserRoleData/{userId}")
    public ResponseResult toAssign(@PathVariable String userId) {
        return ResponseResult.ok().data(roleService.findRoleByUserId(userId));
    }

    /**
     * <b>
     * 根据用户ID分配用户角色
     * </b>
     */
    @ApiOperation(value = "根据用户ID分配用户角色")
    @PostMapping("/doAssignRole")
    public ResponseResult doAssign(@RequestParam String userId, @RequestParam String[] roleId) {
        roleService.saveUserRoleRelationShip(userId, roleId);
        return ResponseResult.ok();
    }
}

紧接着修改 RoleService 接口，添加如下方法

权限控制-用户管理

/**
 * <p>
 * 角色 服务类
 * </p>
 *
 * @author BNTang
 * @since 2021-04-21
 */
public interface RoleService extends IService<Role> {

    /**
     * <b>
     * 根据用户ID获取角色数据
     * </b>
     *
     * @param userId 用户ID
     * @return 角色数据
     */
    Map<String, Object> findRoleByUserId(String userId);

    /**
     * <b>
     * 根据用户ID分配用户角色
     * </b>
     *
     * @param userId 用户ID
     * @param roleId 角色ID
     */
    void saveUserRoleRelationShip(String userId, String[] roleId);
}

修改 RoleServiceImpl

/**
 * <p>
 * 角色 服务实现类
 * </p>
 *
 * @author BNTang
 * @since 2021-04-21
 */
@Service
public class RoleServiceImpl extends ServiceImpl<RoleMapper, Role> implements RoleService {

    @Resource
    private UserRoleService userRoleService;

    /**
     * <b>
     * 根据用户ID获取角色数据
     * </b>
     */
    @Override
    public Map<String, Object> findRoleByUserId(String userId) {
        // 1.查询出所有的角色
        List<Role> allRoles = baseMapper.selectList(null);

        // 2.当前用户选中的角色有哪些
        QueryWrapper<UserRole> queryWrapper = new QueryWrapper<UserRole>()
                .eq("user_id", userId)
                .select("role_id");

        // 获取到当前用户所在的角色关系
        List<UserRole> userRoleList = userRoleService.list(queryWrapper);

        // 取出所有的roleId 放到一个集合当中
        List<String> roleIds = userRoleList.stream().map(UserRole::getRoleId).collect(Collectors.toList());

        // 根据角色id,取出所有的角色对象
        List<Role> userRoles = new ArrayList<>();

        allRoles.forEach(role -> {
            if (roleIds.contains(role.getId())) {
                userRoles.add(role);
            }
        });

        Map<String, Object> roleMap = new HashMap<>(2);

        // 用户的角色
        roleMap.put("assignRoles", userRoles);

        // 所有的角色
        roleMap.put("allRolesList", allRoles);
        return roleMap;
    }

    /**
     * <b>
     * 根据用户ID分配用户角色
     * </b>
     */
    @Override
    public void saveUserRoleRelationShip(String userId, String[] roleId) {
        // 1.删除原来角色与用户之间的关系
        userRoleService.remove(new QueryWrapper<UserRole>().eq("user_id", userId));

        // 2.重新建立关系
        List<UserRole> userRoleArrayList = Stream.of(roleId).map(role -> {
            UserRole userRole = new UserRole();
            userRole.setUserId(userId);
            userRole.setRoleId(role);
            return userRole;
        }).collect(Collectors.toList());

        // 3.批量保存关系
        userRoleService.saveBatch(userRoleArrayList);
    }
}

移动之前 server_video 微服务当中的 AppConfig，目的为了就是其它微服务如果也需要用到分页的配置和逻辑删除就不用再继续写冗余的配置文件内容了，我们的 server_auth 模块中有分页查询用户逻辑删除用户等等，但是 video 微服务当中也需要这样大家都是 server 的子服务就都会有对应的配置内容了

权限控制-用户管理

修改 gateway 配置 server_auth 的网关服务转发规则，修改 gateway 的 application.yml

- id: service-auth
  uri: lb://service-auth
  predicates:
    - Path=/service_auth/**

配置逻辑删除和属性的自动填充如下，每个实体类都自己加一下，不然你也可以按照报错自行排查问题

权限控制-用户管理

前端

修改路由文件 index.js 在路由当中添加路由

权限控制-用户管理

内容如下

权限控制-用户管理

{
  path: '/auth',
  component: Layout,
  redirect: '/auth/user/list',
  name: '权限管理',
  meta: {title: '权限管理', icon: 'tree'},
  children: [
    {
      path: 'user/list',
      name: '用户管理',
      component: () => import('@/views/video/auth/user/list'),
      meta: {title: '用户管理'}
    },
    {
      path: 'user/add',
      name: '用户添加',
      component: () => import('@/views/video/auth/user/form'),
      meta: {title: '用户添加'},
      hidden: true
    },
    {
      path: 'user/update/:id',
      name: '用户修改',
      component: () => import('@/views/video/auth/user/form'),
      meta: {title: '用户修改'},
      hidden: true
    },
    {
      path: 'user/role/:id',
      name: '用户角色',
      component: () => import('@/views/video/auth/user/roleForm'),
      meta: {title: '用户角色'},
      hidden: true
    }
  ]
},

在 api 包中添加 user.js 编写请求方法内容如下

权限控制-用户管理

import request from '@/utils/request';

const api_name = '/service_auth/admin/user';

export default {
  // 获取用户分页数据
  getPageList(page, limit, searchObj) {
    return request({
      url: `${api_name}/getUserList/${page}/${limit}`,
      method: 'get',
      // url查询字符串或表单键值对
      params: searchObj
    });
  },
  // 根据用户id查询用户
  getUserById(id) {
    return request({
      url: `${api_name}/getUserById/${id}`,
      method: 'get'
    });
  },
  // 保存用户
  save(user) {
    return request({
      url: `${api_name}/saveUser`,
      method: 'post',
      data: user
    });
  },
  // 更新用户
  updateById(user) {
    return request({
      url: `${api_name}/updateUser`,
      method: 'post',
      data: user
    });
  },
  // 根据用户id查询用户下角色信息
  getAssign(userId) {
    return request({
      url: `${api_name}/getUserRoleData/${userId}`,
      method: 'get'
    });
  },
  // 保存用户角色信息
  saveAssign(userId, roleId) {
    return request({
      url: `${api_name}/doAssignRole`,
      method: 'post',
      params: {userId, roleId}
    });
  },
  // 删除用户
  removeById(id) {
    return request({
      url: `${api_name}/removeUser/${id}`,
      method: 'post'
    });
  },
  // 批量删除用户
  removeRows(idList) {
    return request({
      url: `${api_name}/batchRemoveUser`,
      method: 'post',
      data: idList
    });
  }
}

都是之前写过的，我直接贴代码如下，如下是 list.vue 的内容

权限控制-用户管理

<template>
  <div class="app-container">
    <!--查询表单-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="searchObj.username" placeholder="用户名"/>
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="fetchData()">查询</el-button>
      <el-button type="default" @click="resetData()">清空</el-button>
    </el-form>
    <!-- 工具条 -->
    <div>
      <el-button type="danger" size="mini" @click="addUser()">添加</el-button>
      <el-button type="danger" size="mini" @click="removeRows()">批量删除</el-button>
    </div>
    <!--用户列表 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      stripe
      
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55"/>
      <el-table-column
        label="序号"
        width="70"
        align="center">
        <template slot-scope="scope">
          {{ (page - 1) * limit + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="openId" label="用户名" align="center"/>
      <el-table-column prop="nickName" label="用户昵称" align="center"/>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <router-link :to="'/auth/user/role/'+scope.row.id">
            <el-button type="success" size="mini">绑定角色</el-button>
          </router-link>
           
          <router-link :to="'/auth/user/update/'+scope.row.id">
            <el-button type="primary" size="mini">修改</el-button>
          </router-link>
           
          <el-button type="danger" @click="removeDataById(scope.row.id)" size="mini">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
      :current-page="page"
      :total="total"
      :page-size="limit"
      :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
      
      layout="sizes, prev, pager, next, jumper, ->, total, slot"
      @current-change="fetchData"
      @size-change="changeSize"
    />
  </div>
</template>
<script>
import user from '@/api/video/auth/user';

export default {
  name: "list",
  data() {
    return {
      // 数据是否正在加载
      listLoading: true,

      // 用户列表
      list: null,

      // 数据库中的总记录数
      total: 0,

      // 默认页码
      page: 1,

      // 每页记录数
      limit: 10,

      // 查询条件的表单对象
      searchObj: {},

      // 批量选择中选择的记录列表
      multipleSelection: []
    }
  },
  created() {
    // 加载页面数据
    this.fetchData();
  },
  methods: {
    // 当页码发生改变的时候
    changeSize(size) {
      this.limit = size;
      this.fetchData(1);
    },
    addUser() {
      // 添加用户,跳转到添加路由
      this.$router.push({path: '/auth/user/add'});
    },
    // 加载用户数据
    fetchData(page = 1) {
      this.page = page;
      user.getPageList(this.page, this.limit, this.searchObj).then(
        response => {
          this.list = response.data.items;
          this.total = response.data.total;

          // 数据加载并绑定成功
          this.listLoading = false;
        }
      );
    },
    // 重置查询表单
    resetData() {
      this.searchObj = {};
      this.fetchData();
    },
    // 根据id删除数据
    removeDataById(id) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 点击确定，远程调用ajax
        return user.removeById(id);
      }).then((response) => {

        // 重新加载列表
        this.fetchData(this.page);
        if (response.success) {
          this.$message({
            type: 'success',
            message: response.message
          })
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      })
    },
    // 当表格复选框选项发生变化的时候触发
    handleSelectionChange(selection) {
      this.multipleSelection = selection;
    },
    // 批量删除
    removeRows() {
      if (this.multipleSelection.length === 0) {
        this.$message({
          type: 'warning',
          message: '请选择要删除的记录!'
        })
        return;
      }
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let idList = [];
        this.multipleSelection.forEach(item => {
          idList.push(item.id);
        });

        // 调用api
        return user.removeRows(idList);
      }).then((response) => {
        this.fetchData(this.page)
        if (response.success) {
          this.$message({
            type: 'success',
            message: response.message
          })
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      });
    }
  }
}
</script>

<style scoped>

</style>

添加与更新页面，form.vue 内容如下

权限控制-用户管理

<template>
  <div class="app-container">
    <el-form ref="user" :model="user" :rules="validateRules" label-width="120px">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="user.openId"/>
      </el-form-item>
      <el-form-item label="用户昵称">
        <el-input v-model="user.nickName"/>
      </el-form-item>

      <el-form-item v-if="!user.id" label="用户密码" prop="password">
        <el-input v-model="user.password"/>
      </el-form-item>
      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import userApi from '@/api/video/auth/user';

const defaultForm = {
  openId: '',
  nickName: '',
  password: ''
}
const validatePass = (rule, value, callback) => {
  if (value.length < 6) {
    callback(new Error('密码不能小于6位'));
  } else {
    callback();
  }
}

export default {
  name: "form",
  data() {
    return {
      user: defaultForm,

      // 保存按钮是否禁用,
      saveBtnDisabled: false,
      validateRules: {
        openId: [{required: true, trigger: 'blur', message: '用户名必须输入'}],
        password: [{required: true, trigger: 'blur', validator: validatePass}]
      }
    }
  },
  // 监听器
  watch: {
    // 路由变化
    $route(to, from) {
      this.init();
    }
  },
  // 生命周期方法（在路由切换，组件不变的情况下不会被调用）
  created() {
    this.init();
  },
  methods: {
    // 表单初始化
    init() {
      if (this.$route.params && this.$route.params.id) {
        const id = this.$route.params.id;
        this.fetchDataById(id);
      } else {
        // 对象拓展运算符：拷贝对象，而不是赋值对象的引用
        this.user = {...defaultForm};
      }
    },
    saveOrUpdate() {
      this.$refs.user.validate(valid => {
        if (valid) {
          // 防止表单重复提交
          this.saveBtnDisabled = true;
          if (!this.user.id) {
            this.saveData();
          } else {
            this.updateData();
          }
        }
      });
    },
    // 新增用户
    saveData() {
      userApi.save(this.user).then(response => {
        // debugger
        if (response.success) {
          this.$message({
            type: 'success',
            message: response.message
          })
          this.$router.push({path: '/auth/user/list'});
        }
      });
    },
    // 根据id更新记录
    updateData() {
      // teacher数据的获取
      userApi.updateById(this.user).then(response => {
        if (response.success) {
          this.$message({
            type: 'success',
            message: response.message
          });
          this.$router.push({path: '/auth/user/list'});
        }
      });
    },
    // 根据id查询记录
    fetchDataById(id) {
      userApi.getUserById(id).then(response => {
        this.user = response.data.user;
      });
    }
  }
}
</script>

<style scoped>

</style>

绑定角色的选择页面，roleForm.vue 内容如下

权限控制-用户管理

<template>
  <div class="app-container">
    <el-checkbox :indeterminate="isIndeterminate"
                 v-model="checkAll"
                 @change="handleCheckAllChange">全选
    </el-checkbox>

    <div style="margin: 15px 0;"></div>
    <el-checkbox-group v-model="checkedRoles" @change="handlecheckedRolesChange">
      <el-checkbox v-for="role in roles"
                   :label="role.id"
                   :key="role.id">
        {{ role.roleName }}
      </el-checkbox>
    </el-checkbox-group>
    <br>
    <el-button :disabled="saveBtnDisabled" type="primary" @click="update">保存</el-button>
  </div>
</template>

<script>

import userApi from '@/api/video/auth/user';

export default {
  name: "roleForm",
  data() {
    return {
      // 是否全部选中
      checkAll: false,

      // 已选中列表
      checkedRoles: [],

      // 所有的角色
      roles: [],

      isIndeterminate: true,
      userId: '',

      // 保存按钮是否禁用
      saveBtnDisabled: false
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      if (this.$route.params && this.$route.params.id) {
        // 获取用户id
        this.userId = this.$route.params.id;

        // 查询用户
        this.getById(this.userId);
      }
    },
    getById(userId) {
      userApi.getAssign(userId).then(response => {
        // 获取用户角色
        let jsonObj = response.data.assignRoles;

        // 设置角色选中状态
        this.checkedRoles = this.getJsonToList(jsonObj, "id");
        this.roles = response.data.allRolesList;
      })
    },
    // 把 json 数据转成 string 再转成对象，根据 Key 获取value数据
    getJsonToList(json, key) {
      // 把JSON字符串转成对象
      let list = JSON.parse(JSON.stringify(json));
      let strText = [];

      // 遍历这个集合对象，获取key的值
      for (let i = 0; i < list.length; i++) {
        strText.push(list[i][key]);
      }
      return strText;
    },
    // 全选
    handleCheckAllChange(val) {
      this.checkedRoles = val ? this.roles : [];
      this.isIndeterminate = false;
    },
    // 切换角色
    handlecheckedRolesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.roles.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.roles.length;
    },
    // 更新提交
    update() {
      // 防止表单重复提交
      this.saveBtnDisabled = true;

      let ids = this.checkedRoles.join(",");

      //修改权限
      userApi.saveAssign(this.userId, ids).then(response => {
        if (response.success) {
          this.$message({
            type: 'success',
            message: '保存成功'
          });
          this.$router.push({path: '/auth/user/list'});
        }
      });
    }
  }
};
</script>

自行启动项目进行测试我自己已经测试过了

活动

应用商城

合作伙伴

开发者

支持与服务

了解天翼云

权限控制-用户管理

权限控制-用户管理

后端

前端

相关文章

基于C语言在gec6818开发板实现贪吃蛇

GEC6818开发板交叉开发项目实现

基于SpringBoot+Vue的高校大学生评奖评优系统的详细设计和实现(源码+lw+部署文档+讲解等)

基于SpringBoot+Vue的毕业设计系统的开发设计实现(源码+lw+部署文档+讲解等)

基于SpringBoot+Vue的OA办公系统设计实现(源码+lw+部署文档+讲解等)

基于SpringBoot+Vue的宠物医院管理系统设计实现(源码+lw+部署文档+讲解等)

Java中的权限管理与访问控制策略

基于SpringBoot+Vue的自助甜品网站的详细设计和实现(源码+lw+部署文档+讲解等)

基于SpringBoot+Vue的新能源汽车信息咨询服务的详细设计和实现(源码+lw+部署文档+讲解等)

基于SpringBoot+Vue的含血库管理系统的详细设计和实现(源码+lw+部署文档+讲解等)

作者介绍

最新文章

linux向同一IP所有终端发送消息wall

用户登录失败N次后锁定用户禁止登陆

你的订婚|结婚纪念日是质数吗？进来测算看看……

利用Attribute标记方法的调用权限

Vue项目中实现Pinia持久化

vmware 共享文件夹的权限问题

热门文章

linux-用户的创建

linux-用户与组的概念

Linux提权之利用 /etc/passwd 文件

Linux 如何设置密码复杂度

虚拟化基础架构Windows 2008篇之2-域用户与域用户组管理

【Linux for Hacker】————5、控制文件和目录权限

热门标签

相关产品

弹性云主机

天翼云电脑（公众版）

对象存储

云硬盘

随机文章

vmware 共享文件夹的权限问题

用户登录失败N次后锁定用户禁止登陆

解决Jenkins用户没有权限“root is missing the Overall/Administer permission”的问题

HDFS Web 报错：Permission denied: user=dr.who, access=READ_EXECUTE, inode=“/tmp“:root:supergroup:drwx

Citrix 多用户使用window10桌面

Linux命令之添加新用户useradd