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

后端

修改 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>

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

活动

应用商城

合作伙伴

开发者

支持与服务

了解天翼云

权限控制-用户管理

权限控制-用户管理

后端

前端

相关文章

MySQL 取相同数据里面其中一个值最大的数据

允许访问：掌握权限的艺术

淘客返利系统自动赚佣金机器人深度解析

淘客返利系统架构设计：从零到上线

深度揭秘：返利机器人的自动赚佣金原理与实现方法

操作系统简介

【知识科普】作为一个开发不认识Jeninks怎么行

【知识科普】小白也能看懂的灰度发布

Python编程实战营：四款实用小项目助你快速入门，从零开始打造你的个人项目集！

基于 Senta 情感分析系统的创新应用与最佳实践

作者介绍

最新文章

深度揭秘：返利机器人的自动赚佣金原理与实现方法

【知识科普】小白也能看懂的灰度发布

linux中出现不在 sudoers 文件中。此事将被报告的解决方法

详细分析el-breadcrumb 面包屑的基本知识（附Demo）

前端window.blur() 和 window.focus() 防止切屏的基本知识

一文读懂Linux用户密码管理

热门文章

linux-用户的创建

linux-用户与组的概念

Linux 如何设置密码复杂度

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

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

Shiro-授权

热门标签

相关产品

弹性云主机

天翼云电脑（公众版）

对象存储

云硬盘

随机文章

Linux命令之向指定登录用户终端发送消息write

切换自己为www-data用户

linux-用户的创建

pgspider Citus worker 账户密码问题

Linux命令之删除用户userdel

linux-权限案例-文件与目录权限