===============【個人學習記錄心得，可供朋友參考】
1：store文件下User獲取用戶信息中：
import {
login,
logout,
getInfo
} from '@/api/login'
import {
getToken,
setToken,
removeToken
} from '@/utils/auth'
const user = {
state: {
token: getToken(),
name: '',
avatar: '',
roles: [],
buttons: [],
},
mutations: {
SET_TOKEN: (state, token) => {
state.token = token
},
SET_NAME: (state, name) => {
state.name = name
},
SET_AVATAR: (state, avatar) => {
state.avatar = avatar
},
SET_ROLES: (state, roles) => {
state.roles = roles
},
SET_BUTTONS: (state,buttons)=>{
state.buttons=buttons
}
},
actions: {
// 登錄
Login({ commit }, userInfo) {
const username = userInfo.username.trim()
return new Promise((resolve, reject) => {
login(username, userInfo.password).then(response => {
const data = response
setToken(data.access_token)
commit('SET_TOKEN', data.access_token)
resolve()
}).catch(error => {
reject(error)
})
})
},
// 獲取用戶信息
GetInfo({
commit,
state
}) {
return new Promise((resolve, reject) => {
getInfo(state.token).then(response => {
const data = response.data
if (data.role && data.role.length > 0) { // 驗證返回的roles是否是一個非空數組
commit('SET_ROLES', data.role)
} else {
reject('getInfo: roles must be a non-null array !')
}
if(data.buttons.data&& data.buttons.data.length>0){
commit('SET_BUTTONS',data.buttons.data) // 添加按鈕權限
}
commit('SET_NAME', data.name)
commit('SET_AVATAR', data.avatar)
resolve(response)
}).catch(error => {
// alert(error + '報錯')
reject(error)
})
})
},
// 登出
LogOut({
commit,
state
}) {
return new Promise((resolve, reject) => {
logout(state.token).then(() => {
commit('SET_TOKEN', '')
commit('SET_ROLES', [])
// commit('SET_BUTTONS', []) // 添加按鈕權限
removeToken()
resolve()
}).catch(error => {
reject(error)
})
})
},
// 前端 登出
FedLogOut({
commit
}) {
return new Promise(resolve => {
commit('SET_TOKEN', '')
removeToken()
resolve()
})
}
}
}
export default user
圖：
：初始化入口過濾按鈕 ===
import Vue from 'vue'
import Vuex from 'vuex'
import VueI18n from 'vue-i18n'
import app from './modules/app'
import user from './modules/user'
import permission from './modules/permission'
// import tagsView from './modules/tagsView'
import getters from './getters'
Vue.use(Vuex)
Vue.use(VueI18n)
Vue.directive('has', {
inserted: function (el, binding) {
if (!permissionJudge(binding.value)) {
el.parentNode.removeChild(el);
}
// 過濾按鈕
function permissionJudge(value) {
// 此處store.getters.getMenuBtnList代表vuex中儲存的按鈕菜單數據
let list = user.state.buttons;
for (let item of list) {
if (item.menuOperateId === value.class) {
return true;
}
}
return false;
}
}
})
const store = new Vuex.Store({
modules: {
app,
user,
permission,
// tagsView
},
getters
})
export default store
