index.js(入口文件)

  1. import Vue from 'vue'
  2. import Vuex from 'vuex'
  3. import getters from './getters'
  4. Vue.use(Vuex)
  5. // https://webpack.js.org/guides/dependency-management/#requirecontext
  6. const modulesFiles = require.context('./modules', true, /\.js$/)
  7. // you do not need `import app from './modules/app'`
  8. // it will auto require all vuex module from modules file
  9. const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  10. // set './app.js' => 'app'
  11. const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  12. const value = modulesFiles(modulePath)
  13. modules[moduleName] = value.default
  14. return modules
  15. }, {})
  16. const store = new Vuex.Store({
  17. modules,
  18. getters
  19. })
  20. 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'
  4. const state = {
  5. token: getToken(),
  6. name: '',
  7. avatar: '',
  8. introduction: '',
  9. roles: []
  10. }
  11. const mutations = {
  12. SET_TOKEN: (state, token) => {
  13. state.token = token
  14. },
  15. SET_INTRODUCTION: (state, introduction) => {
  16. state.introduction = introduction
  17. },
  18. SET_NAME: (state, name) => {
  19. state.name = name
  20. },
  21. SET_AVATAR: (state, avatar) => {
  22. state.avatar = avatar
  23. },
  24. SET_ROLES: (state, roles) => {
  25. state.roles = roles
  26. }
  27. }
  28. const actions = {
  29. // user login
  30. login({ commit }, userInfo) {
  31. const { username, password } = userInfo
  32. return new Promise((resolve, reject) => {
  33. login({ username: username.trim(), password: password }).then(response => {
  34. const { data } = response
  35. commit('SET_TOKEN', data.token)
  36. setToken(data.token)
  37. resolve()
  38. }).catch(error => {
  39. reject(error)
  40. })
  41. })
  42. },
  43. // get user info
  44. getInfo({ commit, state }) {
  45. return new Promise((resolve, reject) => {
  46. getInfo(state.token).then(response => {
  47. const { data } = response
  48. if (!data) {
  49. reject('Verification failed, please Login again.')
  50. }
  51. const { roles, name, avatar, introduction } = data
  52. // roles must be a non-empty array
  53. if (!roles || roles.length <= 0) {
  54. reject('getInfo: roles must be a non-null array!')
  55. }
  56. commit('SET_ROLES', roles)
  57. commit('SET_NAME', name)
  58. commit('SET_AVATAR', avatar)
  59. commit('SET_INTRODUCTION', introduction)
  60. resolve(data)
  61. }).catch(error => {
  62. reject(error)
  63. })
  64. })
  65. },
  66. // user logout
  67. logout({ commit, state, dispatch }) {
  68. return new Promise((resolve, reject) => {
  69. logout(state.token).then(() => {
  70. commit('SET_TOKEN', '')
  71. commit('SET_ROLES', [])
  72. removeToken()
  73. resetRouter()
  74. // reset visited views and cached views
  75. // to fixed https://github.com/PanJiaChen/vue-element-admin/issues/2485
  76. dispatch('tagsView/delAllViews', null, { root: true })
  77. resolve()
  78. }).catch(error => {
  79. reject(error)
  80. })
  81. })
  82. },
  83. // remove token
  84. resetToken({ commit }) {
  85. return new Promise(resolve => {
  86. commit('SET_TOKEN', '')
  87. commit('SET_ROLES', [])
  88. removeToken()
  89. resolve()
  90. })
  91. },
  92. // dynamically modify permissions
  93. async changeRoles({ commit, dispatch }, role) {
  94. const token = role + '-token'
  95. commit('SET_TOKEN', token)
  96. setToken(token)
  97. const { roles } = await dispatch('getInfo')
  98. resetRouter()
  99. // generate accessible routes map based on roles
  100. const accessRoutes = await dispatch('permission/generateRoutes', roles, { root: true })
  101. // dynamically add accessible routes
  102. router.addRoutes(accessRoutes)
  103. // reset visited views and cached views
  104. dispatch('tagsView/delAllViews', null, { root: true })
  105. }
  106. }
  107. export default {
  108. namespaced: true,
  109. state,
  110. mutations,
  111. actions
  112. }

vue-element-admin.zip