前端贾公子

人力资源管理后台 === 主页模块

目录

1.获取用户资料在Vuex中共享

2.显示用户头像和用户名

3.处理头像为空的场景

4.处理token失效的问题

5.调整下拉菜单，实现退出登录

6.修改密码功能实现

6.1-修改密码-弹出层

6.2-修改密码-表单结构

6.3-修改密码-表单校验

6.4-修改密码-确定和取消

7. 清理组件和路由

8.创建项目所需要的组件和路由

9.扩展-解析左侧菜单原理

10. 左侧菜单显示项目logo

1.获取用户资料在Vuex中共享

登录成功跳转到主页之后，可以获取用户资料，获取的资料在Vuex中共享，这样用户就可以很方便的获取该信息

获取流程

在什么位置获取？

之前在导航守卫的位置，可以确定已经有了token，这个位置获取资料更佳，因为导航守卫在页面发生跳转时出发，这时不论你从何时何地进来，如果发现你没获取资料，都可以非常清楚直观的获取资料。判断条件也使得不会发生重复的加载。

封装获取用户资料的API-代码位置(src/api/user.js)

export function getUserInfo() {
  return request({
    url: '/sys/profile'
  })
}

Vuex中声明用户信息状态，修改用户信息的mutations，和获取用户信息的action-代码位置(src/store/modules/user.js)

const state = {
  token: getToken(),
  userInfo: {} // 这里有一个空对象，为了放置后面取数据报错
}

const mutations = {
  setUserInfo(state, userInfo) {
    state.userInfo = userInfo
  }
}
const actions = {
  async getUserInfo (context) {
    const result = await getUserInfo()
    context.commit("setUserInfo", result)
  }
}

通过getters声明userId(快捷访问)-代码位置(src/store/getters.js)

const getters = {
  userId: state => state.user.userInfo.userId,
}
export default getters

在权限拦截处调用action-代码位置(src/pemission.js)

import router from '@/router'
import nprogress from 'nprogress'
import 'nprogress/nprogress.css'
import store from '@/store'

/**
 *前置守卫
 *
*/

const whiteList = ['/login', '/404']
router.beforeEach(async (to, from, next) => {
  nprogress.start()
  if (store.getters.token) {
    // 存在token
    if (to.path === '/login') {
      // 跳转到主页
      next('/') // 中转到主页
      // next（地址）并没有执行后置守卫
      nprogress.done()
    } else {
      // 判断是否获取过资料
      if (!store.getters.userId) {
        await store.dispatch("user/getUserInfo")
      }
      next() // 放行
    }
  } else {
    // 没有token
    if (whiteList.includes(to.path)) {
      next()
    } else {
      next('/login') // 中转到登录页
      nprogress.done()
    }
  }
})

/** *
 * 后置守卫
 * **/
router.afterEach(() => {
  nprogress.done()
})

有同学会问，为什么用户信息不做持久化管理呢？不需要缓存吗？用户信息不同于token，token是当前用户的唯一标识，在几个小时内都是有效的，但是用户信息可能会进行修改或者发生变化，所以用户信息在一般的项目或者业务中不进行缓存。

2.显示用户头像和用户名

首先解析一下顶部组件的内部位置

因为上个小节，将资料已经放到了Vuex中，可以通过getters开放属性，直接在组件中引用即可

Vuex中使用getters暴露属性-代码位置(src/store/getters.js)

const getters = {
  token: state => state.user.token,
  userId: state => state.user.userInfo.userId,
  avatar: state => state.user.userInfo.staffPhoto, // 头像
  name: state => state.user.userInfo.username, // 用户名称
}
export default getters

在Navbar组件引入getters-代码位置(src/layout/components/NavBar.vue)

export default {
  computed: {
    // 引入头像和用户名称
    ...mapGetters([
      'sidebar',
      'avatar',
      'name'
    ])
  },
}

NavBar组件显示用户名和头像-代码位置(src/layout/components/NavBar.vue)