用户用户详情, 渲染头像
This commit is contained in:
jiutianzhiyu
parent
ca7dfeedaa
commit
9f3fd4867d
@ -31,3 +31,10 @@ export function logout() {
|
||||
// method: 'post'
|
||||
// })
|
||||
}
|
||||
|
||||
export function getUserDetailInfoById(id) {
|
||||
return request({
|
||||
url: `/sys/user/${id}`,
|
||||
method: 'GET'
|
||||
})
|
||||
}
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
<div class="right-menu">
|
||||
<el-dropdown class="avatar-container" trigger="click">
|
||||
<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>
|
||||
<i class="el-icon-caret-bottom" style="color:#fff" />
|
||||
</div>
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user