凭证过期，提示重新登录

magic-boot-ui/src/permission.js

@@ -6,7 +6,6 @@ import NProgress from 'nprogress' // progress bar
 import 'nprogress/nprogress.css' // progress bar style
 import { getToken } from '@/scripts/auth' // get token from cookie
 import getPageTitle from '@/scripts/get-page-title'
-import axios from 'axios'
 
 NProgress.configure({ showSpinner: false }) // NProgress Configuration
 
@@ -23,54 +22,35 @@ router.beforeEach(async(to, from, next) => {
   const hasToken = getToken()
 
   if (hasToken) {
-    var tokenIsOverdue
-    await axios({
-      baseURL: process.env.VUE_APP_BASE_API,
-      url: 'security/validateToken',
-      params: {
-        token: hasToken
-      }
-    }).then(res => {
-      const { data } = res
-      tokenIsOverdue = data.data
-    })
-    if (to.path !== '/login' && !tokenIsOverdue) {
-    // if (to.path !== '/login') {
-      store.dispatch('user/logout').then(() => {
-        next(`/login`)
-        NProgress.done()
-      })
+    if (to.path === '/login') {
+      // if is logged in, redirect to the home page
+      next({ path: '/' })
+      NProgress.done()
     } else {
-      if (to.path === '/login') {
-        // if is logged in, redirect to the home page
-        next({ path: '/' })
-        NProgress.done()
+      // determine whether the user has obtained his permission roles through getInfo
+      if (Vue.prototype.$authorities) {
+        next()
       } else {
-        // determine whether the user has obtained his permission roles through getInfo
-        if (Vue.prototype.$authorities) {
-          next()
-        } else {
-          try {
-            // get user info
-            // note: roles must be a object array! such as: ['admin'] or ,['developer','editor']
-            await store.dispatch('user/getUserInfo')
-            await Vue.prototype.$common.getDictData()
-            await Vue.prototype.$common.loadConfig()
-            // generate accessible routes map based on roles
-            const accessRoutes = await store.dispatch('permission/generateRoutes')
-            // dynamically add accessible routes
-            router.addRoutes(accessRoutes)
-            // hack method to ensure that addRoutes is complete
-            // set the replace: true, so the navigation will not leave a history record
-            next({ ...to, replace: true })
-          } catch (error) {
-            console.log(error)
-            // remove token and go to login page to re-login
-            await store.dispatch('user/resetToken')
-            Message.error(error.data || 'Has Error')
-            next(`/login`)
-            NProgress.done()
-          }
+        try {
+          // get user info
+          // note: roles must be a object array! such as: ['admin'] or ,['developer','editor']
+          await store.dispatch('user/getUserInfo')
+          await Vue.prototype.$common.getDictData()
+          await Vue.prototype.$common.loadConfig()
+          // generate accessible routes map based on roles
+          const accessRoutes = await store.dispatch('permission/generateRoutes')
+          // dynamically add accessible routes
+          router.addRoutes(accessRoutes)
+          // hack method to ensure that addRoutes is complete
+          // set the replace: true, so the navigation will not leave a history record
+          next({ ...to, replace: true })
+        } catch (error) {
+          console.log(error)
+          // remove token and go to login page to re-login
+          await store.dispatch('user/resetToken')
+          Message.error(error.data || 'Has Error')
+          next(`/login`)
+          NProgress.done()
         }
       }
     }

magic-boot-ui/src/scripts/request.js

@@ -1,6 +1,6 @@
 
 import axios from 'axios'
-import { Message } from 'element-ui'
+import { Message, MessageBox } from 'element-ui'
 import store from '@/store'
 import { getToken } from '@/scripts/auth'
 
@@ -51,6 +51,23 @@ service.interceptors.response.use(
       var duration = 5
       if (res.code === 402) {
         duration = 1
+        MessageBox.prompt('凭证已过期，请输入密码重新登录', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '退出',
+          inputType: 'password'
+        }).then(({ value }) => {
+          store.dispatch('user/login', {
+            username: store.getters.username,
+            password: value
+          }).then((res) => {
+            console.log(res)
+          })
+        }).catch(() => {
+          store.dispatch('user/logout').then(() => {
+            location.reload()
+          })
+        })
+        return
       }
       if (isShowMsg === false) {
         Message({

magic-boot-ui/src/store/getters.js

@@ -6,6 +6,7 @@ const getters = {
   token: state => state.user.token,
   avatar: state => state.user.avatar,
   name: state => state.user.name,
+  username: state => state.user.username,
   roles: state => state.user.roles,
   permission_routes: state => state.permission.routes,
   errorLogs: state => state.errorLog.logs

magic-boot-ui/src/store/modules/user.js

@@ -6,7 +6,8 @@ import { resetRouter } from '@/router'
 const getDefaultState = () => {
   return {
     token: getToken(),
-    name: ''
+    name: '',
+    username: ''
   }
 }
 
@@ -21,6 +22,9 @@ const mutations = {
   },
   SET_NAME: (state, name) => {
     state.name = name
+  },
+  SET_USERNAME: (state, username) => {
+    state.username = username
   }
 }
 
@@ -33,7 +37,7 @@ const actions = {
         const { data } = response
         commit('SET_TOKEN', data)
         setToken(data)
-        resolve()
+        resolve(data)
       }).catch(error => {
         reject(error)
       })
@@ -54,6 +58,7 @@ const actions = {
         }
         Vue.prototype.$authorities = authorities_
         commit('SET_NAME', data.name)
+        commit('SET_USERNAME', data.username)
         resolve()
       }).catch(error => {
         reject(error)