index.js(入口文件)

  1. import Vue from 'vue'
  2. import Vuex from 'vuex'
  3. import getters from './getters'
  5. Vue.use(Vuex)
  7. // https://webpack.js.org/guides/dependency-management/#requirecontext
  8. const modulesFiles = require.context('./modules', true, /\.js$/)
  10. // you do not need `import app from './modules/app'`
  11. // it will auto require all vuex module from modules file
  12. const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  13.   // set './app.js' => 'app'
  14.   const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  15.   const value = modulesFiles(modulePath)
  16.   modules[moduleName] = value.default
  17.   return modules
  18. }, {})
  20. const store = new Vuex.Store({
  21.   modules,
  22.   getters
  23. })
  25. export default store

getters.js

  1. const getters = {
  2.   sidebar: state => state.app.sidebar,
  3.   size: state => state.app.size,
  4.   device: state => state.app.device,
  5.   visitedViews: state => state.tagsView.visitedViews,
  6.   cachedViews: state => state.tagsView.cachedViews,
  7.   token: state => state.user.token,
  8.   avatar: state => state.user.avatar,
  9.   name: state => state.user.name,
  10.   introduction: state => state.user.introduction,
  11.   roles: state => state.user.roles,
  12.   permission_routes: state => state.permission.routes,
  13.   errorLogs: state => state.errorLog.logs
  14. }
  15. export default getters

modules/user.js

  1. import { login, logout, getInfo } from '@/api/user'
  2. import { getToken, setToken, removeToken } from '@/utils/auth'
  3. import router, { resetRouter } from '@/router'
  5. const state = {
  6.   token: getToken(),
  7.   name: '',
  8.   avatar: '',
  9.   introduction: '',
  10.   roles: []
  11. }
  13. const mutations = {
  14.   SET_TOKEN: (state, token) => {
  15.     state.token = token
  16.   },
  17.   SET_INTRODUCTION: (state, introduction) => {
  18.     state.introduction = introduction
  19.   },
  20.   SET_NAME: (state, name) => {
  21.     state.name = name
  22.   },
  23.   SET_AVATAR: (state, avatar) => {
  24.     state.avatar = avatar
  25.   },
  26.   SET_ROLES: (state, roles) => {
  27.     state.roles = roles
  28.   }
  29. }
  31. const actions = {
  32.   // user login
  33.   login({ commit }, userInfo) {
  34.     const { username, password } = userInfo
  35.     return new Promise((resolve, reject) => {
  36.       login({ username: username.trim(), password: password }).then(response => {
  37.         const { data } = response
  38.         commit('SET_TOKEN', data.token)
  39.         setToken(data.token)
  40.         resolve()
  41.       }).catch(error => {
  42.         reject(error)
  43.       })
  44.     })
  45.   },
  47.   // get user info
  48.   getInfo({ commit, state }) {
  49.     return new Promise((resolve, reject) => {
  50.       getInfo(state.token).then(response => {
  51.         const { data } = response
  53.         if (!data) {
  54.           reject('Verification failed, please Login again.')
  55.         }
  57.         const { roles, name, avatar, introduction } = data
  59.         // roles must be a non-empty array
  60.         if (!roles || roles.length <= 0) {
  61.           reject('getInfo: roles must be a non-null array!')
  62.         }
  64.         commit('SET_ROLES', roles)
  65.         commit('SET_NAME', name)
  66.         commit('SET_AVATAR', avatar)
  67.         commit('SET_INTRODUCTION', introduction)
  68.         resolve(data)
  69.       }).catch(error => {
  70.         reject(error)
  71.       })
  72.     })
  73.   },
  75.   // user logout
  76.   logout({ commit, state, dispatch }) {
  77.     return new Promise((resolve, reject) => {
  78.       logout(state.token).then(() => {
  79.         commit('SET_TOKEN', '')
  80.         commit('SET_ROLES', [])
  81.         removeToken()
  82.         resetRouter()
  84.         // reset visited views and cached views
  85.         // to fixed https://github.com/PanJiaChen/vue-element-admin/issues/2485
  86.         dispatch('tagsView/delAllViews', null, { root: true })
  88.         resolve()
  89.       }).catch(error => {
  90.         reject(error)
  91.       })
  92.     })
  93.   },
  95.   // remove token
  96.   resetToken({ commit }) {
  97.     return new Promise(resolve => {
  98.       commit('SET_TOKEN', '')
  99.       commit('SET_ROLES', [])
  100.       removeToken()
  101.       resolve()
  102.     })
  103.   },
  105.   // dynamically modify permissions
  106.   async changeRoles({ commit, dispatch }, role) {
  107.     const token = role + '-token'
  109.     commit('SET_TOKEN', token)
  110.     setToken(token)
  112.     const { roles } = await dispatch('getInfo')
  114.     resetRouter()
  116.     // generate accessible routes map based on roles
  117.     const accessRoutes = await dispatch('permission/generateRoutes', roles, { root: true })
  118.     // dynamically add accessible routes
  119.     router.addRoutes(accessRoutes)
  121.     // reset visited views and cached views
  122.     dispatch('tagsView/delAllViews', null, { root: true })
  123.   }
  124. }
  126. export default {
  127.   namespaced: true,
  128.   state,
  129.   mutations,
  130.   actions
  131. }

vue-element-admin.zip