token与用户权限-前端权限控制-RBAC模型_token 用户权限矩阵

作者：我家自动化 | 2024-04-18 20:17:15

踩

token 用户权限矩阵

token与用户权限-前端权限控制-RBAC模型

文章目录

内容

完整的权限控制包括后端和前端，这里我们先分析下前端。

1、登录和token携带

关于token的生成和解析，这里不再详述，可以看我上一篇博文，这里主要讲解下登录和登录成功后返回token.

1.1、登录

登录流程：

前端发送登录表单：手机号+密码
- 未避免密码明文传输，这里我们直接md5加密
```
1. npm install js-md5
2. md5(password) 完成MD5加密就这么简单
1
2
```
后端接收：map接收
登录校验
1. 根据手机号查询用户
  1. 不存在：提示用户名或者密码错误
2. 校验密码
  1. 不存在：提示用户名或者密码错误
生成token返回
接收token存储到vuex store和cookie中
1. vuex store token 每次从cookie获取
路由请求拦截器，每次发送请求携带token
1. 判断是否有token
  1. 有就在请求头中携带

后端实现代码:

   @Override
  public String login(Map<String, Object> map) {

  	String mobile = (String) map.get("mobile");
  	String password = (String) map.get("password");
  	UserEntity userEntity = userDao.selectOne(new QueryWrapper<UserEntity>().eq("mobile", mobile));

  	if ( userEntity == null || !StringUtils.equals(password, userEntity.getPassword())) {
  		throw new RRException("用户名或者密码错误");
  	}
  	Map<String, Object> m = new HashMap<>();
  	m.put("companyId", userEntity.getCompanyId());
  	m.put("companyName", userEntity.getCompanyName());
  	m.put("userId", userEntity.getId());
  	return jwtUtils.createJwt(userEntity.getId(), userEntity.getUsername(), m);
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

前端

登录和token 获取

  login({ commit }, userInfo) {
  	const { mobile, password } = userInfo
  	return new Promise((resolve, reject) => {
  	  login({ mobile: mobile.trim(), password: password }).then(response => {
  		console.log(response, 'res');
  		const { token } = response
  		commit('SET_TOKEN', token)
  		setToken(token)
  		resolve()
  	  }).catch(error => {
  		reject(error)
  	  })
  	})
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14

请求头携带token

  service.interceptors.request.use(
    config => {
  	if (store.getters.token) {
  	  config.headers['Authorization'] = getToken()
  	}
  	return config
    },
    error => {
  	console.log(error) 
  	return Promise.reject(error)
    }
  )
1
2
3
4
5
6
7
8
9
10
11
12

2、用户信息（权限信息）获取和存储

要实现前端权限校验，登录成功后，菜单和按钮权限是必须。

获取步骤：

登录成功后，请求用户信息
1. 携带token，token中携带userId
根据用户id，获取菜单权限
1. 菜单权限为2级层级数据
2. 符合前端路由要求
按钮权限获取
1. 为字符串集合
前端接收和存储
1. 接收后存储vuex store中

后端代码

获取个人信息

  @Override
  	public Map<String, Object> profile(String token) {

  		// 解析token，获取claims
  		Claims claims = jwtUtils.parseJwt(token);
          System.out.println(claims);
  //        String id = claims.getId();
  //        Object o = claims.get("jti");
  		String userId = (String) claims.get("userId");
  //        System.out.println(claims.get("userId"));

  		// 获取用户信息
  		UserEntity userEntity = userDao.selectById(userId);
  		// 根据用户id获取权限
  		// 获取菜单权限
  		List<PermissionEntity> menus = queryLevelMenusByUserId(userId);
  		// 获取按钮权限
  		List<String> btns = permissionDao.queryBtnsByUserId(userId);

  		Map<String, Object> userInfo  = new HashMap<>();
  		userInfo.put("user", userEntity);
  		if (CollectionUtils.isNotEmpty(menus)) {
  			userInfo.put("menus", menus);
  		}
  		if (CollectionUtils.isNotEmpty(btns)) {
  			userInfo.put("btns", btns);
  		}
  	   return userInfo;
  	}
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

获取菜单

  private List<PermissionEntity> queryLevelMenusByUserId(String id) {

  		List<PermissionEntity> menus = permissionDao.queryMenusByUserId(id);

  		// 1、如果是集合为空结束
  		if (CollectionUtils.isEmpty(menus)) {
  			return null;
  		}
  		PermissionEntity root = new PermissionEntity();
  		root.setId("0");
  		LinkedList<PermissionEntity> stack = new LinkedList<>();
  		stack.push(root);

  		while (!stack.isEmpty() && menus.size() > 0) {
  			PermissionEntity m = stack.pop();
  			List<PermissionEntity> children = new LinkedList<>();
  			Iterator<PermissionEntity> iterator = menus.iterator();
  			while (iterator.hasNext()) {
  				PermissionEntity next = iterator.next();
  				if (StringUtils.equals(m.getId(),next.getPid())) {
  					// 2.1、找到元素，加入子集合；同时删除在原有集合中移除
  //                    next.setParent(m);
  					children.add(next);
  					iterator.remove();
  				}
  			}
  			if (children.size() > 0) {
  				// 3、子集合不为空，封装层级数据

  				m.setChildren(children);
  				stack.addAll(children);
  //                for (PermissionEntity x: children) {
  //                    stack.push(x);
  //                }
  			}
  		}
  		return root.getChildren();
  	}
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

获取按钮权限

  <select id="queryBtnsByUserId" resultType="java.lang.String">
  		select
  			tp.perms
  		from tb_permission tp
  		left join tb_role_perm trp on trp.perm_id = tp.id
  		left join tb_user_role tur on tur.role_id = trp.role_id
  		where tur.user_id = #{id} and type = 2
  	</select>
1
2
3
4
5
6
7
8

前端

把个人信息存储到store中

 getInfo({ commit, state }) {
 	return new Promise((resolve, reject) => {
 	  getInfo(state.token).then(response => {
 		console.log(response, 'info');
 		const { userInfo } = response
 		const {user, menus, btns} = userInfo
 		if (!user) {
 		  reject('认证失败，请重新登录')
 		}

 		// const { roles, name, avatar, introduction } = data

 		// roles must be a non-empty array
 		if (!menus || menus.length <= 0) {
 		  reject('权限不能为空,请先获取权限')
 		}

 		commit('SET_MENUS', menus)
 		commit('SET_BTNS', btns)
 		commit('SET_USER', user)

 		resolve(userInfo)
 	  }).catch(error => {
 		reject(error)
 	  })
 	})
   },
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

到此我们登录和前端权限控制所需信息获取已完成，下面我要实现前端动态菜单的生成。

后记：

本项目为参考某马视频开发，相关视频及配套资料可自行度娘或者联系本人。上面为自己编写的开发文档，持续更新。欢迎交流，本人QQ:806797785

后端JAVA源代码地址:https://gitee.com/gaogzhen/ihrm-parent    // 后端项目
前端项目源代码地址：https://gitee.com/gaogzhen/ihrm-vue    // 前端后台管理系统
1
2

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/448007