diff --git a/src/api/user.js b/src/api/user.js index 88f4050..351ad43 100644 --- a/src/api/user.js +++ b/src/api/user.js @@ -31,3 +31,10 @@ export function logout() { // method: 'post' // }) } + +export function getUserDetailInfoById(id) { + return request({ + url: `/sys/user/${id}`, + method: 'GET' + }) +} diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index ce6c6f4..245edac 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -11,7 +11,7 @@
- + {{ $store.getters.name }}
diff --git a/src/store/getters.js b/src/store/getters.js index c3310e2..68aac70 100644 --- a/src/store/getters.js +++ b/src/store/getters.js @@ -11,6 +11,8 @@ const getters = { sidebar: state => state.app.sidebar, device: state => state.app.device, token: state => state.user.token, - name: state => state.user.userInfo.username + name: state => state.user.userInfo.username, + staffPhoto: state => state.userInfo.staffPhoto + } export default getters diff --git a/src/store/modules/user.js b/src/store/modules/user.js index 12f9df1..e63530b 100644 --- a/src/store/modules/user.js +++ b/src/store/modules/user.js @@ -1,155 +1,161 @@ -// import { login, logout, getInfo } from '@/api/user' -import { getToken, setToken, removeToken } from '@/utils/auth' - -// 导入登录api -import { getUserInfo, login } from '@/api/user' - -// import { resetRouter } from '@/router' - -// const getDefaultState = () => { -// return { -// token: getToken(), -// name: '', -// avatar: '' -// } -// } - -// const state = getDefaultState() - -// const mutations = { -// RESET_STATE: (state) => { -// Object.assign(state, getDefaultState()) -// }, -// SET_TOKEN: (state, token) => { -// state.token = token -// }, -// SET_NAME: (state, name) => { -// state.name = name -// }, -// SET_AVATAR: (state, avatar) => { -// state.avatar = avatar -// } -// } - -// const actions = { -// // user login -// login({ commit }, userInfo) { -// const { username, password } = userInfo -// return new Promise((resolve, reject) => { -// login({ username: username.trim(), password: password }).then(response => { -// const { data } = response -// commit('SET_TOKEN', data.token) -// setToken(data.token) -// resolve() -// }).catch(error => { -// reject(error) -// }) -// }) -// }, - -// // get user info -// getInfo({ commit, state }) { -// return new Promise((resolve, reject) => { -// getInfo(state.token).then(response => { -// const { data } = response - -// if (!data) { -// return reject('Verification failed, please Login again.') -// } - -// const { name, avatar } = data - -// commit('SET_NAME', name) -// commit('SET_AVATAR', avatar) -// resolve(data) -// }).catch(error => { -// reject(error) -// }) -// }) -// }, - -// // user logout -// logout({ commit, state }) { -// return new Promise((resolve, reject) => { -// logout(state.token).then(() => { -// removeToken() // must remove token first -// resetRouter() -// commit('RESET_STATE') -// resolve() -// }).catch(error => { -// reject(error) -// }) -// }) -// }, - -// // remove token -// resetToken({ commit }) { -// return new Promise(resolve => { -// removeToken() // must remove token first -// commit('RESET_STATE') -// resolve() -// }) -// } -// } - -// export default { -// namespaced: true, -// state, -// mutations, -// actions -// } - -// 状态 -// 初始化的时候从缓存中读取状态 并赋值到初始化的状态上 -const state = { - // 2. 页面刷新初始化时, 尝试恢复 - token: getToken(), - userInfo: {} // 不同组件共享用户信息 -} -// 修改状态 -const mutations = { - // 设置token - setToken(state, data) { // 这里的setToken是user.js里新定义的方法, 不是auth.js里的 - // 这里只是对 vuex 数据的处理 - // 但是没有持久化 - // 持久化的两个步骤 - // 1. 数据发生变化时, 存放起来 - setToken(data) - state.token = data - }, - // 删除缓存 - removeToken(state) { - state.token = null // 删除vuex的token - removeToken() // 先清除 vuex 再清除缓存 vuex和 缓存数据的同步 - }, - // 存储用户信息 - setUserInfo(state, data) { - state.userInfo = { ...data } - }, - // 删除用户信息 - removeUserInfo(state) { - state.userInfo = {} - } -} -// 执行异步 -const actions = { - // 登录 - async login({ commit }, data) { - const res = await login(data) - console.log('将登录页的逻辑移动到 vuex 里面') - commit('setToken', res) - }, - // 获取用户信息 - async getUserInfo({ commit }) { - const res = await getUserInfo() - commit('setUserInfo', res) - return res - } -} - -export default { - namespaced: true, - state, - mutations, - actions -} +// import { login, logout, getInfo } from '@/api/user' +import { getToken, setToken, removeToken } from '@/utils/auth' + +// 导入登录api +import { getUserInfo, login, getUserDetailInfoById } from '@/api/user' + +// import { resetRouter } from '@/router' + +// const getDefaultState = () => { +// return { +// token: getToken(), +// name: '', +// avatar: '' +// } +// } + +// const state = getDefaultState() + +// const mutations = { +// RESET_STATE: (state) => { +// Object.assign(state, getDefaultState()) +// }, +// SET_TOKEN: (state, token) => { +// state.token = token +// }, +// SET_NAME: (state, name) => { +// state.name = name +// }, +// SET_AVATAR: (state, avatar) => { +// state.avatar = avatar +// } +// } + +// const actions = { +// // user login +// login({ commit }, userInfo) { +// const { username, password } = userInfo +// return new Promise((resolve, reject) => { +// login({ username: username.trim(), password: password }).then(response => { +// const { data } = response +// commit('SET_TOKEN', data.token) +// setToken(data.token) +// resolve() +// }).catch(error => { +// reject(error) +// }) +// }) +// }, + +// // get user info +// getInfo({ commit, state }) { +// return new Promise((resolve, reject) => { +// getInfo(state.token).then(response => { +// const { data } = response + +// if (!data) { +// return reject('Verification failed, please Login again.') +// } + +// const { name, avatar } = data + +// commit('SET_NAME', name) +// commit('SET_AVATAR', avatar) +// resolve(data) +// }).catch(error => { +// reject(error) +// }) +// }) +// }, + +// // user logout +// logout({ commit, state }) { +// return new Promise((resolve, reject) => { +// logout(state.token).then(() => { +// removeToken() // must remove token first +// resetRouter() +// commit('RESET_STATE') +// resolve() +// }).catch(error => { +// reject(error) +// }) +// }) +// }, + +// // remove token +// resetToken({ commit }) { +// return new Promise(resolve => { +// removeToken() // must remove token first +// commit('RESET_STATE') +// resolve() +// }) +// } +// } + +// export default { +// namespaced: true, +// state, +// mutations, +// actions +// } + +// 状态 +// 初始化的时候从缓存中读取状态 并赋值到初始化的状态上 +const state = { + // 2. 页面刷新初始化时, 尝试恢复 + token: getToken(), + userInfo: {} // 不同组件共享用户信息 +} +// 修改状态 +const mutations = { + // 设置token + setToken(state, data) { // 这里的setToken是user.js里新定义的方法, 不是auth.js里的 + // 这里只是对 vuex 数据的处理 + // 但是没有持久化 + // 持久化的两个步骤 + // 1. 数据发生变化时, 存放起来 + setToken(data) + state.token = data + }, + // 删除缓存 + removeToken(state) { + state.token = null // 删除vuex的token + removeToken() // 先清除 vuex 再清除缓存 vuex和 缓存数据的同步 + }, + // 存储用户信息 + setUserInfo(state, data) { + state.userInfo = { ...data } + }, + // 删除用户信息 + removeUserInfo(state) { + state.userInfo = {} + } +} +// 执行异步 +const actions = { + // 登录 + async login({ commit }, data) { + const res = await login(data) + console.log('将登录页的逻辑移动到 vuex 里面') + commit('setToken', res) + }, + // 获取用户信息 + async getUserInfo({ commit }) { + // 获取简单用户信息, 包括用户id + const simpleInfo = await getUserInfo() + // 获取用户详细信息, 包括头像等 + const detailInfo = await getUserDetailInfoById(simpleInfo.userId) + const totalInfo = { + ...simpleInfo, ...detailInfo + } + commit('setUserInfo', totalInfo) + return totalInfo + } +} + +export default { + namespaced: true, + state, + mutations, + actions +}