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_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