用户用户详情, 渲染头像
This commit is contained in:
jiutianzhiyu
parent
ca7dfeedaa
commit
9f3fd4867d
@ -31,3 +31,10 @@ export function logout() {
|
|||||||
// method: 'post'
|
// method: 'post'
|
||||||
// })
|
// })
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function getUserDetailInfoById(id) {
|
||||||
|
return request({
|
||||||
|
url: `/sys/user/${id}`,
|
||||||
|
method: 'GET'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|||||||
@ -11,7 +11,7 @@
|
|||||||
<div class="right-menu">
|
<div class="right-menu">
|
||||||
<el-dropdown class="avatar-container" trigger="click">
|
<el-dropdown class="avatar-container" trigger="click">
|
||||||
<div class="avatar-wrapper">
|
<div class="avatar-wrapper">
|
||||||
<img src="@/assets/common/bigUserHeader.png" class="user-avatar">
|
<img src="$store.getters.staffPhoto" class="user-avatar">
|
||||||
<span class="name">{{ $store.getters.name }}</span>
|
<span class="name">{{ $store.getters.name }}</span>
|
||||||
<i class="el-icon-caret-bottom" style="color:#fff" />
|
<i class="el-icon-caret-bottom" style="color:#fff" />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -11,6 +11,8 @@ const getters = {
|
|||||||
sidebar: state => state.app.sidebar,
|
sidebar: state => state.app.sidebar,
|
||||||
device: state => state.app.device,
|
device: state => state.app.device,
|
||||||
token: state => state.user.token,
|
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
|
export default getters
|
||||||
|
|||||||
@ -1,155 +1,161 @@
|
|||||||
// import { login, logout, getInfo } from '@/api/user'
|
// import { login, logout, getInfo } from '@/api/user'
|
||||||
import { getToken, setToken, removeToken } from '@/utils/auth'
|
import { getToken, setToken, removeToken } from '@/utils/auth'
|
||||||
|
|
||||||
// 导入登录api
|
// 导入登录api
|
||||||
import { getUserInfo, login } from '@/api/user'
|
import { getUserInfo, login, getUserDetailInfoById } from '@/api/user'
|
||||||
|
|
||||||
// import { resetRouter } from '@/router'
|
// import { resetRouter } from '@/router'
|
||||||
|
|
||||||
// const getDefaultState = () => {
|
// const getDefaultState = () => {
|
||||||
// return {
|
// return {
|
||||||
// token: getToken(),
|
// token: getToken(),
|
||||||
// name: '',
|
// name: '',
|
||||||
// avatar: ''
|
// avatar: ''
|
||||||
// }
|
// }
|
||||||
// }
|
// }
|
||||||
|
|
||||||
// const state = getDefaultState()
|
// const state = getDefaultState()
|
||||||
|
|
||||||
// const mutations = {
|
// const mutations = {
|
||||||
// RESET_STATE: (state) => {
|
// RESET_STATE: (state) => {
|
||||||
// Object.assign(state, getDefaultState())
|
// Object.assign(state, getDefaultState())
|
||||||
// },
|
// },
|
||||||
// SET_TOKEN: (state, token) => {
|
// SET_TOKEN: (state, token) => {
|
||||||
// state.token = token
|
// state.token = token
|
||||||
// },
|
// },
|
||||||
// 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
|
||||||
// }
|
// }
|
||||||
// }
|
// }
|
||||||
|
|
||||||
// const actions = {
|
// const actions = {
|
||||||
// // user login
|
// // user login
|
||||||
// login({ commit }, userInfo) {
|
// login({ commit }, userInfo) {
|
||||||
// const { username, password } = userInfo
|
// const { username, password } = userInfo
|
||||||
// return new Promise((resolve, reject) => {
|
// return new Promise((resolve, reject) => {
|
||||||
// login({ username: username.trim(), password: password }).then(response => {
|
// login({ username: username.trim(), password: password }).then(response => {
|
||||||
// const { data } = response
|
// const { data } = response
|
||||||
// commit('SET_TOKEN', data.token)
|
// commit('SET_TOKEN', data.token)
|
||||||
// setToken(data.token)
|
// setToken(data.token)
|
||||||
// resolve()
|
// resolve()
|
||||||
// }).catch(error => {
|
// }).catch(error => {
|
||||||
// reject(error)
|
// reject(error)
|
||||||
// })
|
// })
|
||||||
// })
|
// })
|
||||||
// },
|
// },
|
||||||
|
|
||||||
// // get user info
|
// // get user info
|
||||||
// getInfo({ commit, state }) {
|
// getInfo({ commit, state }) {
|
||||||
// return new Promise((resolve, reject) => {
|
// return new Promise((resolve, reject) => {
|
||||||
// getInfo(state.token).then(response => {
|
// getInfo(state.token).then(response => {
|
||||||
// const { data } = response
|
// const { data } = response
|
||||||
|
|
||||||
// if (!data) {
|
// if (!data) {
|
||||||
// return reject('Verification failed, please Login again.')
|
// return reject('Verification failed, please Login again.')
|
||||||
// }
|
// }
|
||||||
|
|
||||||
// const { name, avatar } = data
|
// const { name, avatar } = data
|
||||||
|
|
||||||
// commit('SET_NAME', name)
|
// commit('SET_NAME', name)
|
||||||
// commit('SET_AVATAR', avatar)
|
// commit('SET_AVATAR', avatar)
|
||||||
// resolve(data)
|
// resolve(data)
|
||||||
// }).catch(error => {
|
// }).catch(error => {
|
||||||
// reject(error)
|
// reject(error)
|
||||||
// })
|
// })
|
||||||
// })
|
// })
|
||||||
// },
|
// },
|
||||||
|
|
||||||
// // user logout
|
// // user logout
|
||||||
// logout({ commit, state }) {
|
// logout({ commit, state }) {
|
||||||
// return new Promise((resolve, reject) => {
|
// return new Promise((resolve, reject) => {
|
||||||
// logout(state.token).then(() => {
|
// logout(state.token).then(() => {
|
||||||
// removeToken() // must remove token first
|
// removeToken() // must remove token first
|
||||||
// resetRouter()
|
// resetRouter()
|
||||||
// commit('RESET_STATE')
|
// commit('RESET_STATE')
|
||||||
// resolve()
|
// resolve()
|
||||||
// }).catch(error => {
|
// }).catch(error => {
|
||||||
// reject(error)
|
// reject(error)
|
||||||
// })
|
// })
|
||||||
// })
|
// })
|
||||||
// },
|
// },
|
||||||
|
|
||||||
// // remove token
|
// // remove token
|
||||||
// resetToken({ commit }) {
|
// resetToken({ commit }) {
|
||||||
// return new Promise(resolve => {
|
// return new Promise(resolve => {
|
||||||
// removeToken() // must remove token first
|
// removeToken() // must remove token first
|
||||||
// commit('RESET_STATE')
|
// commit('RESET_STATE')
|
||||||
// resolve()
|
// resolve()
|
||||||
// })
|
// })
|
||||||
// }
|
// }
|
||||||
// }
|
// }
|
||||||
|
|
||||||
// export default {
|
// export default {
|
||||||
// namespaced: true,
|
// namespaced: true,
|
||||||
// state,
|
// state,
|
||||||
// mutations,
|
// mutations,
|
||||||
// actions
|
// actions
|
||||||
// }
|
// }
|
||||||
|
|
||||||
// 状态
|
// 状态
|
||||||
// 初始化的时候从缓存中读取状态 并赋值到初始化的状态上
|
// 初始化的时候从缓存中读取状态 并赋值到初始化的状态上
|
||||||
const state = {
|
const state = {
|
||||||
// 2. 页面刷新初始化时, 尝试恢复
|
// 2. 页面刷新初始化时, 尝试恢复
|
||||||
token: getToken(),
|
token: getToken(),
|
||||||
userInfo: {} // 不同组件共享用户信息
|
userInfo: {} // 不同组件共享用户信息
|
||||||
}
|
}
|
||||||
// 修改状态
|
// 修改状态
|
||||||
const mutations = {
|
const mutations = {
|
||||||
// 设置token
|
// 设置token
|
||||||
setToken(state, data) { // 这里的setToken是user.js里新定义的方法, 不是auth.js里的
|
setToken(state, data) { // 这里的setToken是user.js里新定义的方法, 不是auth.js里的
|
||||||
// 这里只是对 vuex 数据的处理
|
// 这里只是对 vuex 数据的处理
|
||||||
// 但是没有持久化
|
// 但是没有持久化
|
||||||
// 持久化的两个步骤
|
// 持久化的两个步骤
|
||||||
// 1. 数据发生变化时, 存放起来
|
// 1. 数据发生变化时, 存放起来
|
||||||
setToken(data)
|
setToken(data)
|
||||||
state.token = data
|
state.token = data
|
||||||
},
|
},
|
||||||
// 删除缓存
|
// 删除缓存
|
||||||
removeToken(state) {
|
removeToken(state) {
|
||||||
state.token = null // 删除vuex的token
|
state.token = null // 删除vuex的token
|
||||||
removeToken() // 先清除 vuex 再清除缓存 vuex和 缓存数据的同步
|
removeToken() // 先清除 vuex 再清除缓存 vuex和 缓存数据的同步
|
||||||
},
|
},
|
||||||
// 存储用户信息
|
// 存储用户信息
|
||||||
setUserInfo(state, data) {
|
setUserInfo(state, data) {
|
||||||
state.userInfo = { ...data }
|
state.userInfo = { ...data }
|
||||||
},
|
},
|
||||||
// 删除用户信息
|
// 删除用户信息
|
||||||
removeUserInfo(state) {
|
removeUserInfo(state) {
|
||||||
state.userInfo = {}
|
state.userInfo = {}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 执行异步
|
// 执行异步
|
||||||
const actions = {
|
const actions = {
|
||||||
// 登录
|
// 登录
|
||||||
async login({ commit }, data) {
|
async login({ commit }, data) {
|
||||||
const res = await login(data)
|
const res = await login(data)
|
||||||
console.log('将登录页的逻辑移动到 vuex 里面')
|
console.log('将登录页的逻辑移动到 vuex 里面')
|
||||||
commit('setToken', res)
|
commit('setToken', res)
|
||||||
},
|
},
|
||||||
// 获取用户信息
|
// 获取用户信息
|
||||||
async getUserInfo({ commit }) {
|
async getUserInfo({ commit }) {
|
||||||
const res = await getUserInfo()
|
// 获取简单用户信息, 包括用户id
|
||||||
commit('setUserInfo', res)
|
const simpleInfo = await getUserInfo()
|
||||||
return res
|
// 获取用户详细信息, 包括头像等
|
||||||
}
|
const detailInfo = await getUserDetailInfoById(simpleInfo.userId)
|
||||||
}
|
const totalInfo = {
|
||||||
|
...simpleInfo, ...detailInfo
|
||||||
export default {
|
}
|
||||||
namespaced: true,
|
commit('setUserInfo', totalInfo)
|
||||||
state,
|
return totalInfo
|
||||||
mutations,
|
}
|
||||||
actions
|
}
|
||||||
}
|
|
||||||
|
export default {
|
||||||
|
namespaced: true,
|
||||||
|
state,
|
||||||
|
mutations,
|
||||||
|
actions
|
||||||
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user