目录
Vue端代码
1、前端守卫设置
2、Vuex中定义getter
3、新建 getters.js 文件
4、定义 GetInfo 方法获取用户角色信息
5、获取用户信息API
6、请求拦截器
SpringBoot 端
1、Controller层
2、Service 层
3、Mapper接口
4、映射描述文件
描述:
当我们登陆完成后,进去到首页, 在重定向到首页之前需要检查一下vuex 中是否获取了角色信息?
如果vuex的store中还没有 角色信息,需要发送异步请求获取角色信息
Vue端代码
1、前端守卫设置
import store from '@/store'
// 挂载前端路由导航
router.beforeEach((to, from, next) => {
if (getToken()) {
if (to.path === '/login') {
next({ path: '/' })
} else {
if (store.getters.roles.length === 0) {
// 判断当前用户是否已拉取完user_info信息
store.dispatch('GetInfo').then(res => {
// 拉取user_info
const roles = res.roles
console.log(roles)
}).catch(err => {
console.log(err)
})
}
next()
}
} else {
// 没有 token
if (whiteList.indexOf(to.path) !== -1) {
// 在免登陆白名单, 直接进入
next()
}
next(`/login?redirect=${to.path}`)
}
})
2、Vuex中定义getter
src / store / index.js 中，定义并引入 getter
import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import getters from './getters'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
},
modules: {
user
},
getters
})
3、新建 getters.js 文件
新建 src / store / getters.js 文件, 文件定义getter 方法,并向外暴露 getters对象
const getters = {
roles: state => state.user.roles
}
export default getters
4、定义 GetInfo 方法获取用户角色信息
在步骤1中，我们调用了store.dispatch('GetInfo') 方法，但还没有定义，现再来定义已经这个方法
在 src / store / modules / user.js 中的 actions 里定义 GetInfo(获取用户角色方法)
// 1.导入 getInfo 获取角色API
import { login, getInfo } from '@/api/login'
// 2. set方法
mutations: {
SET_TOKEN: (state, token) => {
state.token = token
},
SET_ROLES: (state, roles) => {
state.roles = roles
},
SET_PERMISSIONS: (state, permissions) => {
state.permissions = permissions
},
SET_NAME: (state, name) => {
state.name = name
}
}
// 3.获取用户信息
GetInfo({ commit, state }) {
return new Promise((resolve, reject) => {
getInfo(state.token).then(res => {
const user = res.user
// const avatar = user.avatar == "" ? require("@/assets/image/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)
})
})
}
5、获取用户信息API
在 src / api / login.js文件中, 新增
// 获取用户详细信息
export function getInfo() {
return request({
url: '/getInfo',
method: 'get'
})
}
6、请求拦截器
在 src / utils / request.js 中新增请求拦截器
// request拦截器
service.interceptors.request.use(
config => {
if (getToken()) {
config.headers['Authorization'] = 'Bearer ' + getToken()
}
return config
},
error => {
console.log(error)
Promise.reject(error)
}
)
注意: foo['a'] 这种写法 elist 会报错, 他建议 这么写 foo.a
如果不想它报错,在 .eslintrc.js 文件的 rules 规则中添加
"dot-notation": [0, { "allowKeywords": true }] //避免不必要的方括号
SpringBoot 端
1、Controller层
package com.ruoyi.project.system.controller;
/**
* 登录验证
*
* @author ruoyi
*/
@RestController
@CrossOrigin
public class SysLoginController {
@Resource
private SysLoginService loginService;
@Resource
private ISysMenuService menuService;
@Resource
private SysPermissionService permissionService;
@Resource
private TokenService tokenService;
@PostMapping("/login")
public AjaxResult login(String username, String password, String code, String uuid) {
AjaxResult ajax = AjaxResult.success();
// 生成令牌
String token = loginService.login(username, password, code, uuid);
ajax.put(Constants.TOKEN, token);
return ajax;
}
/**
* 获取用户信息
*
* @return 用户信息
*/
@GetMapping("/getInfo")
public AjaxResult getInfo() {
LoginUser loginUser = tokenService.getLoginUser(ServletUtils.getRequest());
SysUser user = loginUser.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;
}
}
2、Service 层
package com.ruoyi.framework.security.service;
/**
* 用户权限处理
*
* @author ruoyi
*/
@Component
public class SysPermissionService {
@Resource
private ISysMenuService menuService;
@Resource
private ISysRoleService roleService;
/**
* 获取菜单数据权限
*
* @param user 用户信息
* @return 菜单权限信息
*/
public Set<String> getMenuPermission(SysUser user) {
Set<String> roles = new HashSet<String>();
// 管理员拥有所有权限
if (user.isAdmin()) {
roles.add("*:*:*");
} else {
roles.addAll(menuService.selectMenuPermsByUserId(user.getUserId()));
}
return roles;
}
/**
* 获取角色数据权限
*
* @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;
}
}
3、Mapper接口
package com.ruoyi.project.system.service;
import java.util.Set;
/**
* 角色业务层
*
* @author ruoyi
*/
public interface ISysRoleService {
/**
* 根据用户ID查询角色
*
* @param userId 用户ID
* @return 权限列表
*/
public Set<String> selectRolePermissionByUserId(Long userId);
}
4、映射描述文件
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.ruoyi.project.system.mapper.SysRoleMapper">
<resultMap type="SysRole" id="SysRoleResult">
<id property="roleId" column="role_id" />
<result property="roleName" column="role_name" />
<result property="roleKey" column="role_key" />
<result property="roleSort" column="role_sort" />
<result property="dataScope" column="data_scope" />
<result property="status" column="status" />
<result property="delFlag" column="del_flag" />
<result property="createBy" column="create_by" />
<result property="createTime" column="create_time" />
<result property="updateBy" column="update_by" />
<result property="updateTime" column="update_time" />
<result property="remark" column="remark" />
</resultMap>
<sql id="selectRoleVo">
select distinct r.role_id, r.role_name, r.role_key, r.role_sort, r.data_scope,
r.status, r.del_flag, r.create_time, r.remark
from sys_role r
left join sys_user_role ur on ur.role_id = r.role_id
left join sys_user u on u.user_id = ur.user_id
left join sys_dept d on u.dept_id = d.dept_id
</sql>
<select id="selectRolePermissionByUserId" parameterType="Long" resultMap="SysRoleResult">
<include refid="selectRoleVo"/>
WHERE r.del_flag = '0' and ur.user_id = #{userId}
</select>
</mapper>
