RuoYi-Vue的源码分析

自身对于RuoYi-Vue的源码理解与分析

一、登录

1 验证码

1.1 实现思路

  1. 后端生成表达式：num1+num2=?@answer
  2. 将”num1+num2=?”转换成流并生成图片传入前端
  3. 将答案answer存入Redis
  4. 提交表单，验证提交的验证码是否与Redis中存放的答案一致

image-20220307145853403

image-20220307145918678

1.2 代码实现

1.2.1 前端代码

​ login.vue文件位置：/ruoyi-ui/src/views/login.vue

页面初始化：

1
2
3
4
created() {
    this.getCode();
    this.getCookie();
  },

生成验证码图片：

1
2
3
4
5
6
7
8
9
10
methods: {
    getCode() {
      getCodeImg().then(res => {
        this.captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff;
        if (this.captchaOnOff) {
          this.codeUrl = "data:image/gif;base64," + res.img;
          this.loginForm.uuid = res.uuid;
        }
      });
    },

login.js文件位置：/ruoyi-ui/src/api/login.js

获取验证码：

1
2
3
4
5
6
7
8
9
10
export function getCodeImg() {
  return request({
    url: '/captchaImage',
    headers: {
      isToken: false
    },
    method: 'get',
    timeout: 20000
  })
}

request.js文件位置：/ruoyi-ui/src/utils/request.js

axios实例：

1
2
3
4
5
6
7
// 创建axios实例
const service = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分
  baseURL: process.env.VUE_APP_BASE_API,  // 值在配置文件中
  // 超时
  timeout: 10000
})

vue配置文件位置：/src目录下的三个配置文件：.env.development(开发环境)、.env.production(生产环境)、.env.staging(测试环境)

开发环境下的配置文件：

1
2
3
4
5
6
7
8
9
10
11
# 页面标题
VUE_APP_TITLE = 若依管理系统

# 开发环境配置
ENV = 'development'

# 若依管理系统/开发环境
VUE_APP_BASE_API = '/dev-api'

# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true

所以vue获取验证码图片的完整请求路径为http://localhost/dev-api/captchaImage

image-20220307154903619

这边需要注意的是，为了解决跨域问题，URL请求的是前端，然后进行反向代理，映射到后端

vue.config.js文件位置：/ruoyi-ui/src/vue.config.js

1
2
3
4
5
6
7
8
9
10
11
proxy: {
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        target: `http://localhost:8080`,
        changeOrigin: true,
        // 路径重写，先将公共部分替换为空，然后映射到8080端口上
        // 即：将http://localhost/dev-api/captchaImage映射成http://localhost:8080/captchaImage
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }

1.2.2 后端代码

CaptchaController.java文件位置：

​ /ruoyi-admin/src/main/java/com.ruoyi/web/controller/common/CaptchaController.java

创建ajax对象，判断是否开启验证码功能(默认为开启)

1
2
3
4
5
6
7
AjaxResult ajax = AjaxResult.success();
boolean captchaOnOff = configService.selectCaptchaOnOff();
ajax.put("captchaOnOff", captchaOnOff);
if (!captchaOnOff)
{
	return ajax;
}

跟进AjaxResult的success()方法，发现其返回值由状态码、消息和数据组成

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
/**
     * 返回成功消息
     * 
     * @return 成功消息
     */
    public static AjaxResult success()
    {
        return AjaxResult.success("操作成功");
    }

    /**
     * 返回成功数据
     * 
     * @return 成功消息
     */
    public static AjaxResult success(Object data)
    {
        return AjaxResult.success("操作成功", data);
    }

    /**
     * 返回成功消息
     * 
     * @param msg 返回内容
     * @return 成功消息
     */
    public static AjaxResult success(String msg)
    {
        return AjaxResult.success(msg, null);
    }

    /**
     * 返回成功消息
     * 
     * @param msg 返回内容
     * @param data 数据对象
     * @return 成功消息
     */
    public static AjaxResult success(String msg, Object data)
    {
        return new AjaxResult(HttpStatus.SUCCESS, msg, data);
    }

创建完ajax对象后，生成用于存放在Redis中作为key的uuid和verifyKey字符串

1
2
3
4
5
6
7
8
9
// 保存验证码信息
String uuid = IdUtils.simpleUUID();
String verifyKey = Constants.CAPTCHA_CODE_KEY + uuid;

/**
* 验证码 redis key
* 该条语句位于/ruoyi-common/src/main/java/com.ruoyi.common/constant/Contants.java
*/
public static final String CAPTCHA_CODE_KEY = "captcha_codes:";

接着是验证码类型，分为数组计算(math)和字符验证(char)两种

1
2
3
4
5
6
7
8
9
10
// 生成验证码
String captchaType = RuoYiConfig.getCaptchaType();

// 跟进getCaptchaType()方法
public static String getCaptchaType() {
	return captchaType;
}
// 跟进captchaType
/** 验证码类型 */
private static String captchaType;

具体的验证码类型可以在application.yml中设置

image-20220307163217396

这边对默认的math验证码，即数组计算验证码进行分析

1
2
3
4
5
6
7
if ("math".equals(captchaType))
{
	String capText = captchaProducerMath.createText();
    capStr = capText.substring(0, capText.lastIndexOf("@"));
    code = capText.substring(capText.lastIndexOf("@") + 1);
    image = captchaProducerMath.createImage(capStr);
}

从代码中可以看出，生成验证码的本质是生成一个“num1+num2=?@answer”的表达式，然后对表达式进行分割处理

断点调试：

image-20220307163600819

可以看到uuid、verifyKey、captchaType和capText已经生成了

image-20220307164728853

再次断点调试：

image-20220307165015568

可以看到表达式已经被分割成了两部分

image-20220307165042644

分割完表达式后，将刚刚生成的verifyKey作为键，答案code作为值，存入Redis中，其中有效时间为2分钟

1
2
3
4
5
redisCache.setCacheObject(verifyKey, code, Constants.CAPTCHA_EXPIRATION, TimeUnit.MINUTES);
/**
* 验证码有效期（分钟）
*/
public static final Integer CAPTCHA_EXPIRATION = 2;

在Redis中可以看到刚刚生成的verifyKey字符串、答案code以及生存时间TTL

image-20220307165552088

存入Redis之后，将表达式的“问题”部分生成图片，然后将uuid和图片一起存入ajax对象中并返回

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 转换流信息写出
FastByteArrayOutputStream os = new FastByteArrayOutputStream();
try
{
	ImageIO.write(image, "jpg", os);
}
catch (IOException e)
{
	return AjaxResult.error(e.getMessage());
}

ajax.put("uuid", uuid);
ajax.put("img", Base64.encode(os.toByteArray()));
return ajax;

2 用户登录

2.1 实现思路

  1. 用户通过表单将数据提交给前端
  2. 前端将得到的数据进行封装并传给后端
  3. 后端校验验证码
  4. 后端校验用户名和密码
  5. 生成Token

2.2 代码实现

2.2.1 前端代码

打开login.vue，可以发现登录页面是通过表单提交的形式完成的，并且可以发现登录方法是由handleLogin()方法实现的

1
2
3
4
5
6
7
8
9
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">

<el-button
    :loading="loading"
    size="medium"
    type="primary"
    style="width:100%;"
    @click.native.prevent="handleLogin"
>

跟进handleLogin()方法，发现了”记住密码”功能的实现逻辑：如果勾选了，则将用户名和密码存入cookie，反之则将其从cookie中删除

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
handleLogin() {
  this.$refs.loginForm.validate(valid => {
    if (valid) {
      this.loading = true;
      if (this.loginForm.rememberMe) {
        Cookies.set("username", this.loginForm.username, { expires: 30 });
        Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
        Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
      } else {
        Cookies.remove("username");
        Cookies.remove("password");
        Cookies.remove('rememberMe');
      }
      this.$store.dispatch("Login", this.loginForm).then(() => {	// 跟进这里的Login
        this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
      }).catch(() => {
        this.loading = false;
        if (this.captchaOnOff) {
          this.getCode();
        }
      });
    }
  });
}

继续跟进Login，发现这是一个Vuex封装的全局方法，保存了用户名、密码、验证码以及uuid

1
2
3
4
5
6
// 登录
Login({ commit }, userInfo) {
  const username = userInfo.username.trim()
  const password = userInfo.password
  const code = userInfo.code
  const uuid = userInfo.uuid

Login中还封装了一个Promise对象，用来实现异步处理，将后端验证完成后的Token保存在前端的cookie中

1
2
3
4
5
6
7
8
9
return new Promise((resolve, reject) => {
  login(username, password, code, uuid).then(res => {	// 跟进这里的login
    setToken(res.token)
    commit('SET_TOKEN', res.token)
    resolve()
  }).catch(error => {
    reject(error)
  })
})

继续跟进Promise对象中的login方法，发现这是前端的登录方法，把封装的数据通过POST请求传递给后端

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 登录方法
export function login(username, password, code, uuid) {
  const data = {
    username,
    password,
    code,
    uuid
  }
  return request({
    url: '/login',
    headers: {
      isToken: false
    },
    method: 'post',
    data: data
  })
}

2.2.2 后端代码

SysLoginController.java文件位置：

​ /ruoyi-admin/src/main/java/com.ruoyi/web/controller/system/SysLoginController.java

1
2
3
4
5
6
7
8
9
10
@PostMapping("/login")
public AjaxResult login(@RequestBody LoginBody loginBody)
{
  AjaxResult ajax = AjaxResult.success();
  // 生成令牌
  String token = loginService.login(loginBody.getUsername(), loginBody.getPassword(), loginBody.getCode(),	// 跟进这里的login()
    loginBody.getUuid());
  ajax.put(Constants.TOKEN, token);
  return ajax;
}

断点调试：

image-20220307182417546

可以看到前端传过来的json格式的数据

image-20220307182525840

跟进loginService中的login()方法，在这个方法中实现了验证码校验、用户名密码校验以及Token生成

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
public String login(String username, String password, String code, String uuid)
{
  boolean captchaOnOff = configService.selectCaptchaOnOff();
  // 验证码开关
  if (captchaOnOff)
  {
    validateCaptcha(username, code, uuid);	// 跟进这里的validateCaptcha()
  }
  // 用户验证
  Authentication authentication = null;
  try
  {
    // 该方法会去调用UserDetailsServiceImpl.loadUserByUsername
    authentication = authenticationManager
    .authenticate(new UsernamePasswordAuthenticationToken(username, password));
  }
  catch (Exception e)
  {
    if (e instanceof BadCredentialsException)
    {
      AsyncManager.me().execute(AsyncFactory.recordLogininfor(username, Constants.LOGIN_FAIL, MessageUtils.message("user.password.not.match")));
      throw new UserPasswordNotMatchException();
    }
    else
    {
      AsyncManager.me().execute(AsyncFactory.recordLogininfor(username, Constants.LOGIN_FAIL, e.getMessage()));
      throw new ServiceException(e.getMessage());
    }
  }
  AsyncManager.me().execute(AsyncFactory.recordLogininfor(username, Constants.LOGIN_SUCCESS, 			      			MessageUtils.message("user.login.success")));
  LoginUser loginUser = (LoginUser) authentication.getPrincipal();
  recordLoginInfo(loginUser.getUserId());
   // 生成token
  return tokenService.createToken(loginUser);
}

跟进validateCaptcha()方法，这里将前端传来的数据和Redis中的数据(verifyKey和code)进行对比，若前端的验证码为空或者和Redis中的验证码不相同，则异步写入日志中，并抛出异常

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
public void validateCaptcha(String username, String code, String uuid)
{
  String verifyKey = Constants.CAPTCHA_CODE_KEY + StringUtils.nvl(uuid, "");
  String captcha = redisCache.getCacheObject(verifyKey);
  redisCache.deleteObject(verifyKey);	// 验证码提交一次后立即删掉，无论验证成功与否
  if (captcha == null)
  {
    // 工厂模式，异步写日志
    AsyncManager.me().execute(AsyncFactory.recordLogininfor(username, Constants.LOGIN_FAIL, MessageUtils.message("user.jcaptcha.expire")));
    throw new CaptchaExpireException();
  }
  if (!code.equalsIgnoreCase(captcha))
  {
    AsyncManager.me().execute(AsyncFactory.recordLogininfor(username, Constants.LOGIN_FAIL, MessageUtils.message("user.jcaptcha.error")));
    throw new CaptchaException();
  }
}

验证码校验通过的话，就来到了用户校验这个模块，前后端分离版本的安全框架用的是Spring Security框架(Spring Boot版本用的是Shiro），同样的，用户校验也是通过前端传来的数据和MySQL中的数据进行对比，如果数据不匹配地话则异步写入错误日志并抛出异常，数据匹配的话则写入成功日志并继续往下走

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 用户验证
Authentication authentication = null;
try
{
    // 该方法会去调用UserDetailsServiceImpl.loadUserByUsername
  authentication = authenticationManager
  .authenticate(new UsernamePasswordAuthenticationToken(username, password));
}
catch (Exception e)
{
  if (e instanceof BadCredentialsException)
  {
    AsyncManager.me().execute(AsyncFactory.recordLogininfor(username, Constants.LOGIN_FAIL, MessageUtils.message("user.password.not.match")));
    throw new UserPasswordNotMatchException();
  }
  else
  {
    AsyncManager.me().execute(AsyncFactory.recordLogininfor(username, Constants.LOGIN_FAIL, e.getMessage()));
    throw new ServiceException(e.getMessage());
  }
}
AsyncManager.me().execute(AsyncFactory.recordLogininfor(username, Constants.LOGIN_SUCCESS,                  MessageUtils.message("user.login.success")));
LoginUser loginUser = (LoginUser) authentication.getPrincipal();
recordLoginInfo(loginUser.getUserId());

跟进recordLoginInfo()方法，发现这是一个记录登录信息的方法，和前面的写日志不同，这里仅记录登录成功的用户信息，并且数据保存在MySQL数据库中的”sys_user”表中；而写日志则记录了用户的每一次操作，并且数据保存在MySQL数据库中的”sys_logininfor”表中

1
2
3
4
5
6
7
8
9
10
11
12
13
/**
* 记录登录信息
*
* @param userId 用户ID
*/
public void recordLoginInfo(Long userId)
{
  SysUser sysUser = new SysUser();
  sysUser.setUserId(userId);	// 获取用户名
  sysUser.setLoginIp(IpUtils.getIpAddr(ServletUtils.getRequest()));	// 获取用户IP（通过若依自带的工具类）
  sysUser.setLoginDate(DateUtils.getNowDate());	// 获取当前时间
  userService.updateUserProfile(sysUser);	// 更新用户信息
}

层层跟进updateUserProfile()方法，最后在/ruoyi-system/src/main/java/resources/mapper.system/SysUserMapper.xml中找到更新用户信息的动态SQL语句

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<update id="updateUser" parameterType="SysUser">
    update sys_user
    <set>
        <if test="deptId != null and deptId != 0">dept_id = #{deptId},</if>
        <if test="userName != null and userName != ''">user_name = #{userName},</if>
        <if test="nickName != null and nickName != ''">nick_name = #{nickName},</if>
        <if test="email != null ">email = #{email},</if>
        <if test="phonenumber != null ">phonenumber = #{phonenumber},</if>
        <if test="sex != null and sex != ''">sex = #{sex},</if>
        <if test="avatar != null and avatar != ''">avatar = #{avatar},</if>
        <if test="password != null and password != ''">password = #{password},</if>
        <if test="status != null and status != ''">status = #{status},</if>
        <if test="loginIp != null and loginIp != ''">login_ip = #{loginIp},</if>
        <if test="loginDate != null">login_date = #{loginDate},</if>
        <if test="updateBy != null and updateBy != ''">update_by = #{updateBy},</if>
        <if test="remark != null">remark = #{remark},</if>
        update_time = sysdate()
    </set>
    where user_id = #{userId}
</update>

断点调试：

image-20220307192008610

重新登录后可以在控制台中打印出对应的SQL语句

image-20220307192057073

其中insert语句来自于AsyncManager.me().execute(AsyncFactory.recordLogininfor(username, Constants.LOGIN_SUCCESS, MessageUtils.message(“user.login.success”)));**（异步处理）

update语句来自于recordLoginInfo()方法

最后是创建Token，跟进createToken()方法，可以看到给用户设置了一个uuid，然后调用setUserAgent()获取用户信息，调用refreshToken()设置登录有效时间

1
2
3
4
5
6
7
8
9
10
11
public String createToken(LoginUser loginUser)
{
  String token = IdUtils.fastUUID();
  loginUser.setToken(token);
  setUserAgent(loginUser);
  refreshToken(loginUser);

  Map<String, Object> claims = new HashMap<>();
  claims.put(Constants.LOGIN_USER_KEY, token);
  return createToken(claims);
}

setUserAgent()方法：

1
2
3
4
5
6
7
8
9
public void setUserAgent(LoginUser loginUser)
{
  UserAgent userAgent = UserAgent.parseUserAgentString(ServletUtils.getRequest().getHeader("User-Agent"));
  String ip = IpUtils.getIpAddr(ServletUtils.getRequest());
  loginUser.setIpaddr(ip);	// 获取用户IP地址
  loginUser.setLoginLocation(AddressUtils.getRealAddressByIP(ip));	// 获取用户位置
  loginUser.setBrowser(userAgent.getBrowser().getName());	// 获取用户浏览器
  loginUser.setOs(userAgent.getOperatingSystem().getName());	// 获取用户操作系统
}

refreshToken()方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
public void refreshToken(LoginUser loginUser)
{
  loginUser.setLoginTime(System.currentTimeMillis());
  loginUser.setExpireTime(loginUser.getLoginTime() + expireTime * MILLIS_MINUTE);
        // 根据uuid将loginUser缓存
  String userKey = getTokenKey(loginUser.getToken());
  redisCache.setCacheObject(userKey, loginUser, expireTime, TimeUnit.MINUTES);
}

// 令牌有效期（默认30分钟）
@Value("${token.expireTime}")
private int expireTime;
protected static final long MILLIS_SECOND = 1000;
protected static final long MILLIS_MINUTE = 60 * MILLIS_SECOND;
private static final Long MILLIS_MINUTE_TEN = 20 * 60 * 1000L;

跟进createToken()，发现用的是JWT来加密数据，生成Token

1
2
3
4
5
6
7
private String createToken(Map<String, Object> claims)
{
  String token = Jwts.builder()
  .setClaims(claims)
  .signWith(SignatureAlgorithm.HS512, secret).compact();
  return token;
}

3 获取用户角色和权限

3.1 实现思路

  1. 设置全局路由，使得每个页面跳转的时候都要获取用户角色和权限
  2. 前端发送获取用户角色和权限的请求
  3. 后端收到请求后获取用户的角色和权限

3.2 代码实现

3.2.1 前端代码

在src目录下找到全局路由配置文件permission.js，在里面可以找到获取用户信息的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
if (store.getters.roles.length === 0) {
  isRelogin.show = true
  // 判断当前用户是否已拉取完user_info信息
  store.dispatch('GetInfo').then(() => {
    isRelogin.show = false
    store.dispatch('GenerateRoutes').then(accessRoutes => {
    	// 根据roles权限生成可访问的路由表
    	router.addRoutes(accessRoutes) // 动态添加可访问路由表
    	next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
    })
  }).catch(err => {
    store.dispatch('LogOut').then(() => {
      Message.error(err)
      next({ path: '/' })
    })
  })
} else {
  next()
}

跟进GetInfo方法，可以看到里面封装了一个Promise对象，通过commit()方法将读取到的用户角色和权限存入Vuex中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 获取用户信息
GetInfo({ commit, state }) {
  return new Promise((resolve, reject) => {
    getInfo().then(res => {
      const user = res.user
      const avatar = user.avatar == "" ? require("@/assets/images/profile.jpg") : process.env.VUE_APP_BASE_API + user.avatar;
      if (res.roles && res.roles.length > 0) { // 验证返回的roles是否是一个非空数组
        commit('SET_ROLES', res.roles)
        commit('SET_PERMISSIONS', res.permissions)
      } else {
        commit('SET_ROLES', ['ROLE_DEFAULT'])
      }
      commit('SET_NAME', user.userName)
      commit('SET_AVATAR', avatar)
      resolve(res)
      }).catch(error => {
      reject(error)
    })
  })
},

继续跟进getInfo()方法，得知这是前端用来获取用户信息的方法，通过GET方式发送请求给后端

1
2
3
4
5
6
7
// 获取用户详细信息
export function getInfo() {
  return request({
    url: '/getInfo',
    method: 'get'
  })
}

3.2.2 后端代码

SysLoginController.java文件位置：

​ /ruoyi-admin/src/main/java/com.ruoyi/web/controller/system/SysLoginController.java

这段代码的逻辑很简单，就是获取用户的角色和权限，然后封装成ajax对象返回给前端

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/**
* 获取用户信息
* 
* @return 用户信息
*/
@GetMapping("getInfo")
public AjaxResult getInfo()
{
  SysUser user = SecurityUtils.getLoginUser().getUser();
  // 角色集合
  Set<String> roles = permissionService.getRolePermission(user);
  // 权限集合
  Set<String> permissions = permissionService.getMenuPermission(user);
  AjaxResult ajax = AjaxResult.success();
  ajax.put("user", user);
  ajax.put("roles", roles);
  ajax.put("permissions", permissions);
  return ajax;
}

断点调试：

image-20220307213315980

可以看到此时登录的用户角色为”admin”、权限为”*:*:*“

image-20220307213439966

需要注意的是，”*:*:*“是Spring Security中的表示方式，代表该用户拥有所有权限，其中星号表示通配符

跟进getRolePermission()方法，代码逻辑也很简单，判断该用户是否为管理员，是的话则添加一个”admin”标记，不是的话返回数据库查找对应的角色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/**
* 获取角色数据权限
* 
* @param user 用户信息
* @return 角色权限信息
*/
public Set<String> getRolePermission(SysUser user)
{
  Set<String> roles = new HashSet<String>();
  // 管理员拥有所有权限
  if (user.isAdmin())
  {
    roles.add("admin");
  }
  else
  {
    roles.addAll(roleService.selectRolePermissionByUserId(user.getUserId()));
  }
  return roles;
}

继续跟进isAdmin()方法，这里是判断该用户在数据库中的角色编号是否为管理员编号

1
2
3
4
5
6
7
8
9
public boolean isAdmin()
{
  return isAdmin(this.userId);
}

public static boolean isAdmin(Long userId)
{
  return userId != null && 1L == userId;
}

获取用户权限和获取用户角色的代码逻辑大同小异，这里不再展开叙述

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/**
* 获取菜单数据权限
* 
* @param user 用户信息
* @return 菜单权限信息
*/
public Set<String> getMenuPermission(SysUser user)
{
  Set<String> perms = new HashSet<String>();
        // 管理员拥有所有权限
  if (user.isAdmin())
  {
    perms.add("*:*:*");
  }
  else
  {
    perms.addAll(menuService.selectMenuPermsByUserId(user.getUserId()));
  }
  return perms;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/**
* 根据用户ID查询权限
* 
* @param userId 用户ID
* @return 权限列表
*/
@Override
public Set<String> selectMenuPermsByUserId(Long userId)
{
  List<String> perms = menuMapper.selectMenuPermsByUserId(userId);
  Set<String> permsSet = new HashSet<>();
  for (String perm : perms)
  {
    if (StringUtils.isNotEmpty(perm))
    {
      permsSet.addAll(Arrays.asList(perm.trim().split(",")));
    }
  }
  return permsSet;
}

3.3 数据库设计

和这部分相关的数据库表一共有三张，分别是sys_user、sys_role和sys_user_role表

3.3.1 sys_user表

这张表存放了用户的一些基本信息，在这里最重要的是user_id字段，它是该表的主键，和用户是一对一的关系

image-20220307215214115

3.3.2 sys_role表

这张表存放了不同角色的信息，在这里最重要的是role_id字段，它是该表的主键，和角色是一对一的关系

image-20220307215322553

3.3.3 sys_user_role表

这张表是sys_user表和sys_role表的中间表，它记录了不同用户所对应的不同角色

image-20220307215407395

4 获取动态菜单路由

4.1 实现思路

  1. 根据上一步获取的用户权限，发送不同的请求给后端
  2. 后端根据前端发来的请求，从数据库中获取不同的菜单信息并封装成动态路由，返回给前端

4.2 代码实现

4.2.1 前端代码

在/src/permission.js中跟进GenerateRoutes，发现这是前端向后端请求路由数据的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
actions: {
    // 生成路由
    GenerateRoutes({ commit }) {
      return new Promise(resolve => {
        // 向后端请求路由数据
        getRouters().then(res => {
          const sdata = JSON.parse(JSON.stringify(res.data))
          const rdata = JSON.parse(JSON.stringify(res.data))
          const sidebarRoutes = filterAsyncRouter(sdata)
          const rewriteRoutes = filterAsyncRouter(rdata, false, true)
          const asyncRoutes = filterDynamicRoutes(dynamicRoutes);
          rewriteRoutes.push({ path: '*', redirect: '/404', hidden: true })
          router.addRoutes(asyncRoutes);
          commit('SET_ROUTES', rewriteRoutes)
          commit('SET_SIDEBAR_ROUTERS',constantRoutes.concat(sidebarRoutes))
          commit('SET_DEFAULT_ROUTES', sidebarRoutes)
          commit('SET_TOPBAR_ROUTES', sidebarRoutes)
          resolve(rewriteRoutes)
        })
      })
    }
  }

继续跟进getRouters()方法，可以知道该方法是通过GET方式发送请求给后端的

1
2
3
4
5
6
7
// 获取路由
export const getRouters = () => {
  return request({
    url: '/getRouters',
    method: 'get'
  })
}

4.2.2 后端代码

SysLoginController.java文件位置：

​ /ruoyi-admin/src/main/java/com.ruoyi/web/controller/system/SysLoginController.java

在SysLoginController.java文件中找到getRouters()方法，代码的逻辑很简单，就是根据当前用户的id去查找菜单来生成动态路由

1
2
3
4
5
6
7
8
9
10
11
12
/**
* 获取路由信息
* 
* @return 路由信息
*/
@GetMapping("getRouters")
public AjaxResult getRouters()
{
  Long userId = SecurityUtils.getUserId();
  List<SysMenu> menus = menuService.selectMenuTreeByUserId(userId);
  return AjaxResult.success(menuService.buildMenus(menus));
}

跟进selectMenuTreeByUserId()方法，可以看到获取路由的逻辑和获取用户权限大同小异

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@Override
public List<SysMenu> selectMenuTreeByUserId(Long userId)
{
  List<SysMenu> menus = null;
  if (SecurityUtils.isAdmin(userId))
  {
    menus = menuMapper.selectMenuTreeAll();
  }
  else
  {
    menus = menuMapper.selectMenuTreeByUserId(userId);
  }
  return getChildPerms(menus, 0);
}

继续跟进selectMenuTreeAll()，找到system/src/main/java/resources/mapper.system/SysUserMapper.xml，可以看到存储菜单信息的数据库是sys_menu

1
2
3
4
5
<select id="selectMenuTreeAll" resultMap="SysMenuResult">
  select distinct m.menu_id, m.parent_id, m.menu_name, m.path, m.component, m.`query`, m.visible, m.status, ifnull(m.perms,'') as perms, m.is_frame, m.is_cache, m.menu_type, m.icon, m.order_num, m.create_time
  from sys_menu m where m.menu_type in ('M', 'C') and m.status = 0
  order by m.parent_id, m.order_num
</select>

sys_menu表信息：

表中的每一条信息都有两个很重要的字段：menu_id和parent_id，这里面的设计逻辑是，parent_id为0的即为主菜单，而parent_id为其他数字的则为该数字对应的menu_id的菜单的子菜单

举个例子：

​ 系统管理、系统监控、系统工具的parent_id为0，所以它们就是系统的主菜单

​ 而用户管理、角色管理的parent_id为1，则它们是系统管理的子菜单

​ 同理，在线用户的parent_id为2，则它是系统监控的子菜单

image-20220308205723665

后端从数据库中读取菜单信息后，使用getChildPerms()方法对读取到的数据进行数据封装

在getChildPerms()方法中：

​ 在之前的selectMenuTreeByUserId()方法中传递了两个参数：从数据库中读取的数据和0，其中0表示父节点的ID，即从主菜单开始获取子菜单信息，然后根据主菜单个数进行循环调用recursionFn()方法，获取子节点的信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/**
* 根据父节点的ID获取所有子节点
* 
* @param list 分类表
* @param parentId 传入的父节点ID
* @return String
*/
public List<SysMenu>  getChildPerms(List<SysMenu> list, int parentId)
{
  List<SysMenu> returnList = new ArrayList<SysMenu>();
  for (Iterator<SysMenu> iterator = list.iterator(); iterator.hasNext();)
  {
    SysMenu t = (SysMenu) iterator.next();
    // 一、根据传入的某个父节点ID,遍历该父节点的所有子节点
    if (t.getParentId() == parentId)
    {
      recursionFn(list, t);
      returnList.add(t);
    }
  }
  return returnList;
}

在recursionFn()方法中：

​ 这边最主要的是递归调用，根据自己的节点ID，寻找自己的子菜单

​ 其中递归出口为hasChild()方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/**
* 递归列表
* 
* @param list
* @param t
*/
private void recursionFn(List<SysMenu> list, SysMenu t)
{
  // 得到子节点列表
  List<SysMenu> childList = getChildList(list, t);
  t.setChildren(childList);
  for (SysMenu tChild : childList)
  {
    if (hasChild(list, tChild))	// 递归出口
    {
      recursionFn(list, tChild);
    }
  }
}

在hasChild()方法中：

​ 使用三元表达式，根据列表长度判断是否存在子节点

1
2
3
4
5
6
7
/**
* 判断是否有子节点
*/
private boolean hasChild(List<SysMenu> list, SysMenu t)
{
  return getChildList(list, t).size() > 0;
}

二、前台数据加载

1 首页

从URL中我们可以发现，首页的加载文件是index.vue，所以在/src/views/index.vue即可看到首页的前端代码

1
2
3
4
5
6
7
8
9
h2>若依后台管理框架</h2>
        <p>
          一直想做一款后台管理系统，看了很多优秀的开源项目但是发现没有合适自己的。于是利用空闲休息时间开始自己写一套后台系统。如此有了若依管理系统。，她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对她进行深度定制，以做出更强系统。所有前端后台代码封装过后十分精简易上手，出错概率低。同时支持移动客户端访问。系统会陆续更新一些实用功能。
        </p>
        <p>
          <b>当前版本:</b> <span>v{{ version }}</span>
        </p>
        <p>
          <el-tag type="danger">&yen;免费开源</el-tag>

2 侧边菜单、主信息窗口

在前面我们已经知道，侧边菜单的来源是动态路由信息，所以我们可以在路由文件，也就是/src/router/index.js中找到根目录的前端代码

1
2
3
4
5
6
7
8
9
10
11
12
13
{
  path: '',
  component: Layout,
  redirect: 'index',
  children: [
  {
    path: 'index',
    component: () => import('@/views/index'),
    name: 'Index',
    meta: { title: '首页', icon: 'dashboard', affix: true }
  }
  ]
},

从代码中我们可以发现，这里使用的是Layout组件，所以我们打开/src/layou/index.vue文件，从前端JS代码中可以发现使用了siderbar来实现侧边菜单功能、使用app-main实现主信息窗口功能

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
  <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
    <sidebar class="sidebar-container"/>
    <div :class="{hasTagsView:needTagsView}" class="main-container">
      <div :class="{'fixed-header':fixedHeader}">
        <navbar />
        <tags-view v-if="needTagsView" />
      </div>
      <app-main />
      <right-panel>
        <settings />
      </right-panel>
    </div>
  </div>
</template>

查看siderbar，也就是/src/layout/components/Siderbar/index.vue，从中可以看到实现侧边的关键代码：

1
2
3
4
5
6
<sidebar-item
  v-for="(route, index) in sidebarRouters"
  :key="route.path  + index"
  :item="route"
  :base-path="route.path"
/>

3 管理菜单页面

点击任一管理菜单（以用户管理为例），我们会发现URL的后缀为/system/user，这是因为在数据库中，每个菜单都绑定了对应的资源

image-20220308221043809

3.1 获取用户列表

3.1.1 前端代码

查看/src/views/system/user/index.vue，我们可以看到该页面的前端代码

1
2
3
4
5
<el-col :span="12">
  <el-form-item v-if="form.userId == undefined" label="用户名称" prop="userName">
    <el-input v-model="form.userName" placeholder="请输入用户名称" maxlength="30" />
  </el-form-item>
</el-col>

在前端代码中找到created()方法，可以看到页面的数据来源是getList()和getTreeselect()

1
2
3
4
5
6
7
created() {
  this.getList();
  this.getTreeselect();
  this.getConfigKey("sys.user.initPassword").then(response => {
    this.initPassword = response.msg;
  });
},

跟进getList()方法，可以看出这是一个获取用户列表的方法，还可以发现代码入口：listUser()

1
2
3
4
5
6
7
8
9
10
/** 查询用户列表 */
getList() {
  this.loading = true;	// 前端加载效果（如转圈圈）
  listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
    this.userList = response.rows;
    this.total = response.total;
    this.loading = false;
  }
  );
},

跟进listUser()，可以知道该方法是通过GET方式发送请求给后端的

1
2
3
4
5
6
7
8
// 查询用户列表
export function listUser(query) {
  return request({
    url: '/system/user/list',
    method: 'get',
    params: query	// 参数
  })
}

3.1.2 后端代码

SysUserController.java文件位置：

​ /ruoyi-admin/src/main/java/com.ruoyi/web/controller/system/SysUserController.java

在SysUserController.java中找到list()方法，代码的逻辑是先判断当前用户权限，拥有权限才能够进入list()方法

1
2
3
4
5
6
7
8
9
10
11
/**
* 获取用户列表
*/
@PreAuthorize("@ss.hasPermi('system:user:list')")	// 权限判断
@GetMapping("/list")
public TableDataInfo list(SysUser user)
{
  startPage();	// 设置分页
  List<SysUser> list = userService.selectUserList(user);	// 查询数据
  return getDataTable(list);	// 封装数据
}

跟进startPage()，可以看出这是个设置分页的方法

先创建一个PageDomain对象，用来从HTTP请求中获取分页相关参数（通过自定义工具类）；接着从PageDomain对象中将数据取出，做一个非空判断，然后设置属性orderBy和reasonable，调用PageHelper.startPage()把参数传进去

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/**
* 设置请求分页数据
*/
public static void startPage()
{
  PageDomain pageDomain = TableSupport.buildPageRequest();
  Integer pageNum = pageDomain.getPageNum();	// 分页序号
  Integer pageSize = pageDomain.getPageSize();	// 页内数据量
  if (StringUtils.isNotNull(pageNum) && StringUtils.isNotNull(pageSize))
  {
    String orderBy = SqlUtil.escapeOrderBySql(pageDomain.getOrderBy());	// 排序方式
    Boolean reasonable = pageDomain.getReasonable();	// 对参数进行逻辑处理，保证参数的正确性
    PageHelper.startPage(pageNum, pageSize, orderBy).setReasonable(reasonable);
  }
}

跟进selectUserList()，可以看出这是个查询数据的方法

代码逻辑很简单，调用Mapper去查询sys_user表中的数据即可

1
2
3
4
5
6
7
8
9
10
11
12
/**
* 根据条件分页查询用户列表
* 
* @param user 用户信息
* @return 用户信息集合信息
*/
@Override
@DataScope(deptAlias = "d", userAlias = "u")	// 给表设置别名
public List<SysUser> selectUserList(SysUser user)
{
  return userMapper.selectUserList(user);
}

跟进getDataTable()，可以看出这是个响应前后端分离的数据封装方法

1
2
3
4
5
6
7
8
9
10
11
12
13
/**
 * 响应请求分页数据
 */
@SuppressWarnings({ "rawtypes", "unchecked" })
protected TableDataInfo getDataTable(List<?> list)
{
    TableDataInfo rspData = new TableDataInfo();
    rspData.setCode(HttpStatus.SUCCESS);
    rspData.setMsg("查询成功");
    rspData.setRows(list);
    rspData.setTotal(new PageInfo(list).getTotal());
    return rspData;
}

3.2 获取部门树

3.2.1 前端代码

跟进getTreeselect()方法，可以看出这是一个获取部门树的方法，还可以发现代码入口：treeselect()

1
2
3
4
5
6
/** 查询部门下拉树结构 */
getTreeselect() {
  treeselect().then(response => {
    this.deptOptions = response.data;
  });
},

跟进treeselect()，可以知道该方法是通过GET方式发送请求给后端的

1
2
3
4
5
6
7
// 查询部门下拉树结构
export function treeselect() {
  return request({
    url: '/system/dept/treeselect',
    method: 'get'
  })
}

3.2.2 后端代码

SysDeptController.java文件位置：

​ /ruoyi-admin/src/main/java/com.ruoyi/web/controller/system/SysDeptController.java

在SysDeptController.java文件找到treeselect()方法，获取部门树的逻辑和获取用户列表差不多，区别在于这边没有设置分页，而且返回的数据对象类型也不同

1
2
3
4
5
6
7
8
9
/**
 * 获取部门下拉树列表
 */
@GetMapping("/treeselect")
public AjaxResult treeselect(SysDept dept)
{
    List<SysDept> depts = deptService.selectDeptList(dept);
    return AjaxResult.success(deptService.buildDeptTreeSelect(depts));
}

跟进selectDeptList()，可以看到也是调用Mapper从sys_dept表中获取数据

1
2
3
4
5
6
7
8
9
10
11
12
/**
 * 查询部门管理数据
 * 
 * @param dept 部门信息
 * @return 部门信息集合
 */
@Override
@DataScope(deptAlias = "d")
public List<SysDept> selectDeptList(SysDept dept)
{
    return deptMapper.selectDeptList(dept);
}

跟进buildDeptTreeSelect()方法，可以看出这边通过调用buildDeptTreeSelect()方法来构建树，然后将构建好的树进行封装并返回

1
2
3
4
5
6
7
8
9
10
11
12
13
/**
 * 构建前端所需要下拉树结构
 * 
 * @param depts 部门列表
 * @return 下拉树结构列表
 */
@Override
public List<TreeSelect> buildDeptTreeSelect(List<SysDept> depts)
{
    List<SysDept> deptTrees = buildDeptTree(depts);
    // stream流：更改deptTreesd
    return deptTrees.stream().map(TreeSelect::new).collect(Collectors.toList());
}

跟进buildDeptTree()，代码逻辑和侧边菜单的实现差不多，都是通过递归来找到根节点和对应的子节点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 * 构建前端所需要树结构
 * 
 * @param depts 部门列表
 * @return 树结构列表
 */
@Override
public List<SysDept> buildDeptTree(List<SysDept> depts)
{
    List<SysDept> returnList = new ArrayList<SysDept>();
    List<Long> tempList = new ArrayList<Long>();
    for (SysDept dept : depts)
    {
        tempList.add(dept.getDeptId());
    }
    for (SysDept dept : depts)
    {
        // 如果是顶级节点, 遍历该父节点的所有子节点
        if (!tempList.contains(dept.getParentId()))	// 递归出口
        {
            recursionFn(depts, dept);	// 递归调用
            returnList.add(dept);
        }
    }
    if (returnList.isEmpty())
    {
        returnList = depts;
    }
    return returnList;
}

三、用户操作

1 条件查询

1.1 实现思路

实现的思路很简单，就是在获取用户列表的基础上，加上一个条件判断：根据页面点击的部门不同，前端得到一个不同的id，然后再根据这个id去数据库中筛选不同的数据，最后返回到前端

1.2 代码实现

1.2.1 前端代码

查看/src/views/system/user/index.vue，找到el-tree模块的代码，可以发现绑定按钮点击的方法：handleNodeClick

1
2
3
4
5
6
7
8
9
<el-tree
  :data="deptOptions"
  :props="defaultProps"
  :expand-on-click-node="false"
  :filter-node-method="filterNode"
  ref="tree"
  default-expand-all
  @node-click="handleNodeClick"
/>

跟进handleNodeClick，可以看出点击按钮后，前端会获取当前的部门id并返回给后端，然后调用handleQuery()

1
2
3
4
5
// 节点单击事件
handleNodeClick(data) {
  this.queryParams.deptId = data.id;
  this.handleQuery();
},

跟进handleQuery()，可以看到这边又调用了getList()方法，结合上面的handleNodeClick来看，整个流程就是在获取用户列表的基础上加上一个条件判断

1
2
3
4
5
/** 搜索按钮操作 */
handleQuery() {
  this.queryParams.pageNum = 1;
  this.getList();
},
赏

You will never know the mysteries!

支付宝
微信

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

姓名：米古丽<br>生日：2000-03-03<br>队伍：仰望星空派<br>QQ：2916681908<br><br>一清主义至上者<br>I sense a mystery!