登录ok

src/permission.js

@@ -35,16 +35,35 @@ router.beforeEach(async(to, from, next) => {
           // get user info
           // note: roles must be a object array! such as: ['admin'] or ,['developer','editor']
           const { roles } = await store.dispatch('user/getInfo')
+          // 判断页面是否可见
+          const permissions = store.getters.userInfo.permissions
+          const allowed = to.meta.allowed || []
+          let isVisible = false
+          if (allowed.length > 0) {
+            for (let i = 0; i < allowed.length; i++) {
+              if (permissions.includes(allowed[i])) {
+                isVisible = true
+                break
+              }
+            }
+            if (isVisible) {
+              next()
+            } else {
+              next('/403')
+            }
+          } else {
+            next()
+          }
 
-          // generate accessible routes map based on roles
+          // // generate accessible routes map based on roles
-          const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
+          // const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
 
-          // dynamically add accessible routes
+          // // dynamically add accessible routes
-          router.addRoutes(accessRoutes)
+          // router.addRoutes(accessRoutes)
 
-          // hack method to ensure that addRoutes is complete
+          // // hack method to ensure that addRoutes is complete
-          // set the replace: true, so the navigation will not leave a history record
+          // // set the replace: true, so the navigation will not leave a history record
-          next({ ...to, replace: true })
+          // next({ ...to, replace: true })
         } catch (error) {
           // remove token and go to login page to re-login
           await store.dispatch('user/resetToken')

src/store/getters.js

@@ -12,6 +12,7 @@ const getters = {
   roles: state => state.user.roles,
   permission_routes: state => state.permission.routes,
   addRoutes: state => state.permission.addRoutes,
-  errorLogs: state => state.errorLog.logs
+  errorLogs: state => state.errorLog.logs,
+  userInfo: state => state.user.userInfo
 }
 export default getters

src/store/modules/user.js

@@ -6,25 +6,29 @@ const state = {
   token: getToken(),
   name: '',
   avatar: '',
-  introduction: '',
+  //introduction: '',
-  roles: []
+  //roles: [],
+  userInfo: {}
 }
 
 const mutations = {
   SET_TOKEN: (state, token) => {
     state.token = token
   },
-  SET_INTRODUCTION: (state, introduction) => {
+  // SET_INTRODUCTION: (state, introduction) => {
-    state.introduction = introduction
+  //   state.introduction = introduction
-  },
+  // },
-  SET_NAME: (state, name) => {
+  // SET_NAME: (state, name) => {
-    state.name = name
+  //   state.name = name
-  },
+  // },
-  SET_AVATAR: (state, avatar) => {
+  // SET_AVATAR: (state, avatar) => {
-    state.avatar = avatar
+  //   state.avatar = avatar
-  },
+  // },
-  SET_ROLES: (state, roles) => {
+  // SET_ROLES: (state, roles) => {
-    state.roles = roles
+  //   state.roles = roles
+  // }
+  SET_USERINFO: (state, userInfo) => {
+    state.userInfo = userInfo
   }
 }
 
@@ -36,6 +40,7 @@ const actions = {
       login({ username: username.trim(), password: password }).then(response => {
         const { data } = response
         commit('SET_TOKEN', data.token)
+        commit('SET_USERINFO', data.userInfo)
         setToken(data.token)
         resolve()
       }).catch(error => {
@@ -49,23 +54,30 @@ const actions = {
     return new Promise((resolve, reject) => {
       getInfo(state.token).then(response => {
         const { data } = response
-
+        if (!data || data.errcode !== 0) {
-        if (!data) {
+          reject('验证失败，请重新登录！')
-          reject('Verification failed, please Login again.')
         }
+        const { userInfo } = data
 
-        const { roles, name, avatar, introduction } = data
+        commit('SET_USERINFO', userInfo)
-
-        // roles must be a non-empty array
-        if (!roles || roles.length <= 0) {
-          reject('getInfo: roles must be a non-null array!')
-        }
-
-        commit('SET_ROLES', roles)
-        commit('SET_NAME', name)
-        commit('SET_AVATAR', avatar)
-        commit('SET_INTRODUCTION', introduction)
         resolve(data)
+
+        // if (!data) {
+        //   reject('Verification failed, please Login again.')
+        // }
+
+        // const { roles, name, avatar, introduction } = data.userInfo
+
+        // // roles must be a non-empty array
+        // if (!roles || roles.length <= 0) {
+        //   reject('getInfo: roles must be a non-null array!')
+        // }
+
+        // commit('SET_ROLES', roles)
+        // commit('SET_NAME', name)
+        // commit('SET_AVATAR', avatar)
+        // commit('SET_INTRODUCTION', introduction)
+        //resolve(data)
       }).catch(error => {
         reject(error)
       })
@@ -76,8 +88,8 @@ const actions = {
   logout({ commit, state }) {
     return new Promise((resolve, reject) => {
       logout(state.token).then(() => {
-        commit('SET_TOKEN', '')
+        //commit('SET_TOKEN', '')
-        commit('SET_ROLES', [])
+        //commit('SET_ROLES', [])
         removeToken()
         resetRouter()
         resolve()
@@ -91,33 +103,33 @@ const actions = {
   resetToken({ commit }) {
     return new Promise(resolve => {
       commit('SET_TOKEN', '')
-      commit('SET_ROLES', [])
+      //commit('SET_ROLES', [])
       removeToken()
       resolve()
     })
   },
 
   // Dynamically modify permissions
-  changeRoles({ commit, dispatch }, role) {
+  // changeRoles({ commit, dispatch }, role) {
-    return new Promise(async resolve => {
+  //   return new Promise(async resolve => {
-      const token = role + '-token'
+  //     const token = role + '-token'
 
-      commit('SET_TOKEN', token)
+  //     commit('SET_TOKEN', token)
-      setToken(token)
+  //     setToken(token)
 
-      const { roles } = await dispatch('getInfo')
+  //     const { roles } = await dispatch('getInfo')
 
-      resetRouter()
+  //     resetRouter()
 
-      // generate accessible routes map based on roles
+  //     // generate accessible routes map based on roles
-      const accessRoutes = await dispatch('permission/generateRoutes', roles, { root: true })
+  //     const accessRoutes = await dispatch('permission/generateRoutes', roles, { root: true })
 
-      // dynamically add accessible routes
+  //     // dynamically add accessible routes
-      router.addRoutes(accessRoutes)
+  //     router.addRoutes(accessRoutes)
 
-      resolve()
+  //     resolve()
-    })
+  //   })
-  }
+  // }
 }
 
 export default {

src/utils/request.js

@@ -16,7 +16,8 @@ service.interceptors.request.use(
     // Do something before request is sent
     if (store.getters.token) {
       // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
-      config.headers['X-Token'] = getToken()
+      config.headers.authorization = 'Bearer ' + getToken()
+      //config.headers['X-Token'] = getToken()
     }
     return config
   },
@@ -41,7 +42,31 @@ service.interceptors.response.use(
    */
   response => {
     const res = response.data
-    if (res.code !== 20000) {
+    if (res.errcode !== 0) {
+      Message({
+        message: res.errmsg,
+        type: 'error',
+        duration: 5 * 1000
+      })
+      // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
+      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
+        // 请自行在引入 MessageBox
+        // import { Message, MessageBox } from 'element-ui'
+        MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
+          confirmButtonText: '重新登录',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          store.dispatch('user/resetToken').then(() => {
+            location.reload() // 为了重新实例化vue-router对象 避免bug
+          })
+        })
+      }
+      return Promise.reject('error')
+    } else {
+      return response;
+    }
+    /*if (res.code !== 20000) {
       Message({
         message: res.message,
         type: 'error',
@@ -64,7 +89,7 @@ service.interceptors.response.use(
       return Promise.reject('error')
     } else {
       return res
-    }
+    }*/
   },
   error => {
     console.log('err' + error) // for debug

src/views/login/index.vue

@@ -83,28 +83,30 @@ export default {
   name: 'Login',
   components: { LangSelect, SocialSign },
   data() {
-    const validateUsername = (rule, value, callback) => {
+    // const validateUsername = (rule, value, callback) => {
-      if (!validUsername(value)) {
+    //   if (!validUsername(value)) {
-        callback(new Error('Please enter the correct user name'))
+    //     callback(new Error('Please enter the correct user name'))
-      } else {
+    //   } else {
-        callback()
+    //     callback()
-      }
+    //   }
-    }
+    // }
-    const validatePassword = (rule, value, callback) => {
+    // const validatePassword = (rule, value, callback) => {
-      if (value.length < 6) {
+    //   if (value.length < 6) {
-        callback(new Error('The password can not be less than 6 digits'))
+    //     callback(new Error('The password can not be less than 6 digits'))
-      } else {
+    //   } else {
-        callback()
+    //     callback()
-      }
+    //   }
-    }
+    // }
     return {
       loginForm: {
         username: 'admin',
         password: '111111'
       },
       loginRules: {
-        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
+        // username: [{ required: true, trigger: 'blur', validator: validateUsername }],
-        password: [{ required: true, trigger: 'blur', validator: validatePassword }]
+        // password: [{ required: true, trigger: 'blur', validator: validatePassword }]
+        username: [{ required: true, trigger: 'blur', message: '用户名不能为空' }],
+        password: [{ required: true, trigger: 'blur', message: '密码不能为空' }]
       },
       passwordType: 'password',
       loading: false,