从零开始码后台管理系统—权限表设计-后台管理系统图片

前后台可以正式接通以后，我们就可以设计基础的几个数据库表了，菜单表、角色表、用户表、角色菜单表和用户角色表，有这5个表我们就可以搞定用户权限。

因为要开始涉及数据库操作，每个表的单表操作我们都会创建Controller、Service、Entity、Mapper、MapperXML，我们先来新建数据库表结构，先建立最基础的表结构，后续有需要再完善，毕竟使用了MybatisPlus，改变结构之后只需要在实体类加属性就好了。

用户表：

CREATE TABLE `sys_user` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(20) NOT NULL COMMENT '用户名',
  `password` varchar(200) NOT NULL COMMENT '密码',
  `salt` varchar(10) DEFAULT NULL COMMENT '盐',
  `name` varchar(64) DEFAULT NULL COMMENT '姓名',
  `create_time` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  `create_by` int(11) DEFAULT NULL COMMENT '创建者',
  `update_time` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '修改时间',
  `update_by` int(11) DEFAULT NULL COMMENT '修改人',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8 COMMENT='用户账户';

角色表：

CREATE TABLE `sys_role` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `label` varchar(200) DEFAULT NULL COMMENT '角色名称',
  `alias` varchar(100) DEFAULT NULL COMMENT '角色别名',
  `sort` int(11) DEFAULT '0' COMMENT '排序',
  `create_time` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  `create_by` int(11) DEFAULT NULL COMMENT '创建者',
  `update_time` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '修改时间',
  `update_by` int(11) DEFAULT NULL COMMENT '修改人',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='角色表';

用户角色表：

CREATE TABLE `sys_user_role` (
  `id` int(11) DEFAULT NULL,
  `user_id` int(11) DEFAULT NULL,
  `role_id` int(11) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='用户角色表';

菜单表：

CREATE TABLE `sys_menu` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `parent_id` int(11) DEFAULT NULL COMMENT '上级菜单',
  `title` varchar(200) DEFAULT NULL COMMENT '显示名称',
  `type` varchar(10) DEFAULT NULL COMMENT '类型',
  `name` varchar(100) DEFAULT NULL COMMENT '别名',
  `icon` varchar(100) DEFAULT NULL COMMENT '菜单图标',
  `path` varchar(100) DEFAULT NULL COMMENT '路由地址',
  `redirect` varchar(200) DEFAULT NULL COMMENT '重定向',
  `active` varchar(200) DEFAULT NULL COMMENT '菜单高亮',
  `component` varchar(100) DEFAULT NULL COMMENT '视图',
  `color` varchar(10) DEFAULT NULL COMMENT '颜色',
  `hidden` bit(1) DEFAULT b'0' COMMENT '隐藏菜单',
  `hidden_breadcrumb` bit(1) DEFAULT b'0' COMMENT '隐藏面包屑',
  `create_time` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  `create_by` int(11) DEFAULT NULL COMMENT '创建者',
  `update_time` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '修改时间',
  `update_by` int(11) DEFAULT NULL COMMENT '修改人',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='菜单表';

角色菜单表：

CREATE TABLE `sys_role_menu` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `role_id` int(11) DEFAULT NULL COMMENT '角色ID',
  `menu_id` int(11) DEFAULT NULL COMMENT '菜单ID',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='角色菜单表';

在用户表中插入超管账号：

INSERT INTO `demo`.`sys_user` (`id`, `username`, `password`, `salt`, `name`, `create_time`, `create_by`, `update_time`, `update_by`) VALUES (1, 'admin', 'admin', '123456', '超级管理员', DEFAULT, NULL, DEFAULT, NULL)

引入Lombok方便写实体类

<dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
    <version>1.18.22</version>
</dependency>

新建用户相关类：

@Data
@TableName("sys_user")
public class SysUserEntity {
    @TableId
    private Long id;

    private String username;

    private String password;

    private String salt;

    private String name;

    private LocalDateTime createTime;

    private Long createBy;

    private LocalDateTime updateTime;

    private Long updateBy;
}

@Mapper
public interface SysUserMapper extends BaseMapper<SysUserEntity> {
}

public interface SysUserService extends IService<SysUserEntity> {
    /**
     * 根据用户名获取用户信息
     * @param username
     * @return
     */
    SysUserEntity getUserByUserName(String username);
}

/**
 * @program:
 * @description: 用户服务层
 * @author:
 * @create: 2022-01-27 16:58
 **/
@Service("sysUserService")
public class SysUserServiceImpl extends ServiceImpl<SysUserMapper, SysUserEntity> implements SysUserService {
    @Override
    public SysUserEntity getUserByUserName(String username) {
        return this.baseMapper.selectOne(new LambdaQueryWrapper<SysUserEntity>()
                .eq(SysUserEntity::getUsername,username)
        );
    }
}

修改完善部分登录服务代码：

@RestController
@RequestMapping("/")
public class LoginController {
    @Autowired
    private LoginService loginService;

    @PostMapping("token")
    public SaResult doLogin(@RequestBody LoginForm form) throws Exception {

        Map<String,Object> data = loginService.login(form);

        return SaResult.data(data);
    }
}

public interface LoginService {
    Map<String, Object> login(LoginForm form) throws Exception;
}

@Service("loginService")
public class LoginServiceImpl implements LoginService {
    @Autowired
    private SysUserService userService;

    @Override
    public Map<String, Object> login(LoginForm form) throws Exception {
        // 验证码校验

        // 用户是否存在校验
        SysUserEntity user = userService.getUserByUserName(form.getUsername());
        System.out.println(user);
        if (user == null){
            throw new Exception("用户不存在");
        }

        // 密码校验

        // 用户登录
        StpUtil.login(form.getUsername());

        // 返回结果
        Map<String,Object> data = new HashMap<>();
        data.put("token",StpUtil.getTokenValue());
        data.put("userInfo","{"
                + "\"dashboard\": " + 0
                + ", \"userId\": \"1\""
                + ", \"userName\": \"Administrator\""
                + ", \"role\": \"[\"SA\", \"admin\", \"Auditor\"]\""
                + "}");
        return data;
    }
}

重启项目调用登录，控制台输出一下内容

LoginForm(username=admin, password=21232f297a57a5a743894a0e4a801fc3)
SysUserEntity(id=1, username=admin, password=admin, salt=123456, name=超级管理员, 
createTime=2022-01-27T17:14:16, createBy=null, updateTime=2022-01-27T17:14:16, 
updateBy=null)

SaLog -->: 账号[admin]登录成功

整体登录流程就是这样了，继续完善。先确定密码加密方式：

md5(md5(password)+md5(salt))

在测试类中生成密码存到数据库中

@Test
public void createPass(){
    System.out.println(SaSecureUtil.md5(SaSecureUtil.md5("admin")+SaSecureUtil.md5("20f883")));

}

登录接口中密码已经在前端经过md5加密，所以修改后端代码

if (user == null){
    // 用户不存在
    throw new Exception("账号密码错误");
}

// 密码校验
String password = SaSecureUtil.md5(form.getPassword()+SaSecureUtil.md5(user.getSalt()));
if(!user.getPassword().equals(password)){
    throw new Exception("账号密码错误");
}

新建菜单Controller

@RestController
@RequestMapping("/system/menu")
public class SysMenuController {
    // 创建几个静态路由
    @GetMapping("/my")
    public SaResult my(){
        Map<String,Object> data = new HashMap<>();
        List<SysMenuDTO> menu = new ArrayList<>();
        List<String> permissions = new ArrayList<>();
        permissions.add("list.add");
        permissions.add("list.edit");
        permissions.add("list.delete");
        permissions.add("user.add");
        permissions.add("user.edit");
        permissions.add("user.delete");
        data.put("permissions",permissions);


        SysMenuDTO menuitem = new SysMenuDTO("home","/home","home","首页","el-icon-eleme-filled","menu",null);
        List<SysMenuDTO> childrens = new ArrayList<>();
        childrens.add(new SysMenuDTO("dashboard","/dashboard","home","控制台","el-icon-menu","menu",true));
        childrens.add(new SysMenuDTO("userCenter","/userCenter","userCenter","个人信息","el-icon-user","menu",null));
        menuitem.setChildren(childrens);
        menu.add(menuitem);

        menuitem = new SysMenuDTO("setting","/setting","setting/system","配置","el-icon-setting","menu",null);
        childrens = new ArrayList<>();
        childrens.add(new SysMenuDTO("settingMenu","/setting/menu","setting/menu","菜单管理","el-icon-fold","menu",null));
        menuitem.setChildren(childrens);
        menu.add(menuitem);

        data.put("menu",menu);

        return SaResult.data(data);
    }

}

重启登录

获取到的菜单

OK，接下来从完善菜单管理开始逐步写。