我是如此相信ᯤ⁶⁶ᴳ

人力资源智能化管理项目（day03:主页模块）

学习源码可以看我的个人前端学习笔记 (github.com):qdxzw/humanResourceIntelligentManagementProject

觉得有帮助的同学，可以点心心支持一下哈

主页权限验证(permission.js)

import router from '@/router'
import nprogress from 'nprogress' // 进度条
import 'nprogress/nprogress.css' // 进度条样式
import store from '@/store'
/**
 * 前置守卫
 *
 */
// 白名单
const whiteList = ['/login', '/404']
router.beforeEach((to, from, next) => {
  nprogress.start() // 开启进度条
  if (store.getters.token) {
    // 存在token
    if (to.path === '/login') {
      // 跳转到主页
      next('/') // 中转到主页
      // next有地址的话并没有执行后置守卫
      nprogress.done()
    } else {
      next() // 放过
    }
  } else {
    // 没有token
    if (whiteList.includes(to.path)) {
      next() // 放过
    } else {
      next('/login') // 中转到登录页
      nprogress.done()
    }
  }
})

/**
 * 后置守卫
 *
 */
router.afterEach(() => {
  console.log(123)
  nprogress.done() // 关闭进度条
})

获取用户资料在Vuex中共享

获取资料action的调用位置

1.封装API请求

export function getUserInfo () {
  // request执行之后会得到promise对象(再通过使用async和await可以获取结果)
  return request({
    url: '/sys/profile',
    method: 'GET'
  })
}

2.Vuex应用

// 存放数据
const state = {
  token: getToken(), // 从缓存中读取初始值
  userInfo: {} // 存储用户基本资料状态
}

  setUserInfo (state, userInfo) {
    state.userInfo = userInfo
  }

  // 获取用户的基本资料
  async getUserInfo (context) {
    const result = await getUserInfo()
    context.commit('setUserInfo', result)
  }

3.getters声明userId

userId: state => state.user.userInfo.userId, // 取用户id，用于判断页面是否获取过资料

4.权限拦截处调用action

// 如果不是则放过
      // 判断是否获取过资料
      if (!store.getters.userId) {
        // 如果没有则获取资料
        await store.dispatch('user/getUserInfo')
      }
      next()

显示用户头像和用户名

1.Vuex使用getters暴露属性

avatar: state => state.user.userInfo.staffPhoto, // 用户头像
name: state => state.user.userInfo.username // 用户姓名

2.Navbar组件引入

// 辅助函数，自动引入getters中的属性
    // 引入用户头像和名称
    ...mapGetters(['sidebar', 'avatar', 'name'])
  },

3.Navbar设置


          
          
          {{ name }}