feat(user): 添加用户角色获取和存储功能

- 在 user store 中添加 roles 状态和 SET_ROLES mutation
- 在 getters 中添加 roles 属性
- 修改 permission.js 中的逻辑，增加对用户角色的判断
- 更新 request.js 中的 401 错误处理方式
- 在 404.vue 中更新版权信息

src/assets/js/utils/permission.js

@@ -16,20 +16,24 @@ router.beforeEach((to, from, next) => {
       next({ path: '/login' })
       NProgress.done()
     } else {
-      // 判断当前用户是否已拉取完user_info信息
+      if (store.getters.roles.length === 0) {
-      store
+        // 判断当前用户是否已拉取完user_info信息
-        .dispatch('user/getInfo')
+        store
-        .then(() => {
+          .dispatch('user/getInfo')
-          store.dispatch('app/GenerateRoutes').then(() => {
+          .then(() => {
-            next()
+            store.dispatch('app/GenerateRoutes').then(() => {
+              next()
+            })
           })
-        })
+          .catch(err => {
-        .catch(err => {
+            store.dispatch('user/logout').then(() => {
-          store.dispatch('user/logout').then(() => {
+              Message.error(err)
-            Message.error(err)
+              next({ path: '/ogin' })
-            next({ path: '/ogin' })
+            })
           })
-        })
+      } else {
+        next()
+      }
     }
   } else {
     // 没有token

src/assets/js/utils/request.js

@@ -1,7 +1,8 @@
 import axios from 'axios'
 import { MessageBox, Message, Loading } from 'element-ui'
 import store from '@/store'
-import { getToken } from '@/assets/js/utils/auth'
+import { getToken, removeToken } from '@/assets/js/utils/auth'
+import router from '@/router'
 
 // create an axios instance
 const service = axios.create({
@@ -61,15 +62,12 @@ service.interceptors.response.use(
     if (res.code === 401) {
       MessageBox.confirm('登录状态已过期，请重新登录', '系统提示', {
         confirmButtonText: '重新登录',
-        cancelButtonText: '取消',
+        showCancelButton: false,
         type: 'warning'
+      }).then(() => {
+        removeToken()
+        router.push({ path: '/login' })
       })
-        .then(() => {
-          store.dispatch('user/resetToken').then(() => {
-            location.reload()
-          })
-        })
-        .catch(() => {})
     } else if (res.code === 500) {
       Message({
         message: res.message,

src/store/getters.js

@@ -2,8 +2,9 @@ const getters = {
   sidebar: state => state.app.sidebar,
   device: state => state.app.device,
   token: state => state.user.token,
+  roles: state => state.user.roles,
   avatar: state => state.user.avatar,
   name: state => state.user.name,
-  sidebarList: state => state.user.sidebarList,
+  sidebarList: state => state.user.sidebarList
 }
 export default getters

src/store/modules/user.js

@@ -4,7 +4,8 @@ import { getToken, setToken, removeToken } from '@/assets/js/utils/auth'
 const state = {
   token: getToken(),
   name: '',
-  avatar: ''
+  avatar: '',
+  roles: []
 }
 
 const mutations = {
@@ -16,6 +17,9 @@ const mutations = {
   },
   SET_AVATAR: (state, avatar) => {
     state.avatar = avatar
+  },
+  SET_ROLES: (state, roles) => {
+    state.roles = roles
   }
 }
 
@@ -51,12 +55,12 @@ const actions = {
     return new Promise((resolve, reject) => {
       getInfo(state.token)
         .then(res => {
-          if (!res) {
+          let roles = res.content.content.roleCodes || []
-            reject('Verification failed, please Login again.')
+          if (roles && roles.length > 0) {
+            // 验证返回的roles是否是一个非空数组
+            commit('SET_ROLES', roles)
           }
-
           commit('SET_NAME', res.content.content.userName)
-          // commit('SET_AVATAR', res.avatar)
           resolve(res)
         })
         .catch(error => {

src/views/app/404.vue

@@ -11,7 +11,12 @@
         <div class="bullshit__oops">OOPS!</div>
         <div class="bullshit__info">
           版权所有
-          <a class="link-type" href="http://www.ebiz-interactive.com/" target="_blank">@易商阜极前端团队</a>
+          <a
+            class="link-type"
+            href="http://www.ebiz-interactive.com/"
+            target="_blank"
+            >@易商数智前端团队</a
+          >
         </div>
         <div class="bullshit__headline">{{ message }}</div>
         <div class="bullshit__info">