Vue前端项目-首页-获取角色

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、前端守卫设置

引入 store
在未获取角色时，发起异步请求

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_infoconst roles = res.rolesconsole.log(roles)}).catch(err => {console.log(err)})}next()}} else {// 没有 tokenif (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 {@Resourceprivate SysLoginService loginService;@Resourceprivate ISysMenuService menuService;@Resourceprivate SysPermissionService permissionService;@Resourceprivate 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 {@Resourceprivate ISysMenuService menuService;@Resourceprivate 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 rleft join sys_user_role ur on ur.role_id = r.role_idleft join sys_user u on u.user_id = ur.user_idleft 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>