人资项目知识点

知来者之可追
100 阅读3分钟

一  登录组件login

1. Vuex用户模块的创建和持久化管理

登录表单校验通过 ,  调用Vuex提供的登录的action中会调用登录接口 ,如果成功执行，会返回token , 将token共享的到Vuex中方便获取, 并且存储到cookie数据持久化

2. Vue-cli代理解决跨域

在后端没有开启cors的情况下，浏览器的同源策略会直接限制后端返回的数据。既然前端不能直接请求后端服务，那就搞个中间服务，中间服务刚好和我们的前端服务同源， 使用node后台向后端发请求，同源策略只针对浏览器！！！

.env.development文件
    # just a flag
    ENV = 'development'
    # base api
    VUE_APP_BASE_API = '/api'
vue.config.js 文件
    devServer: {  proxy: {  '/api': {  target: 'https://  ' }   }
request.js文件
    const service = axios.create({  baseURL: process.env.VUE_APP_BASE_API   })

3. axios封装

  • 创建axios实例,配置接口统一的前缀
  • 在请求拦截器中添加参数(注入token)
  • 在响应拦截器中处理响应错误,统一处理接口返回的数据层级(解构数据,处理异常)

4. 环境区分

.env.development中设置开发环境变量默认 NODE_ENV 值 development

.env.production中设置生产环境变量默认 NODE_ENV 值为 production

使用process.env.属性的方式获取 NODE_ENV VUE_APP_BASE_API

5. 主页权限验证-鉴权

使用路由守卫根据用于token及跳转的路径进一步处理

二 员工组件employee

需求:  点击左树,筛选右表,请求参数包含部门id和页码,使用watch侦听器检测不同属性值的变化,但是新旧值是相同的

注意：在变更 (不是替换) 对象或数组时，旧值将与新值相同，因为它们的引用指向同一个对象/数组。Vue 不会保留变更之前值的副本。

解决:  使用计算属性,和深拷贝, 每次数据更新就会发生变化,并且新旧值不是一个地址

1. 递归函数转换树状数据

list2Tree(list, rootValue) {
      const arr = []
      list.forEach(item => {
        if (item.pid === rootValue) {
          const children = this.list2Tree(list, item.id)
          item.children = children
          arr.push(item)
        }
      })
      return arr
},

2. 导出excel

  • 导出员工接口返回的是二进制流

  • axios配置responseType为blob接收二进制流文件为Blob格式

  • 安装file-saver包，实现下载Blob文件 yarn add file-saver

npm包

import FileSaver from 'file-saver'
FileSaver.saveAs(res, '员工信息表.xlsx')

js原生

const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
const a = document.createElement('a')
a.href = URL.createObjectURL(blob)
a.download = '员工信息表'
a.click()
URL.revokeObjectURL(a.href)
a.remove()

三 区分权限permission.js

3.1  路由级

去拆分静态路由和动态路由, 根据登陆用户的权限点添加动态路由(动态添加的路由不具备响应式,使用vuex共享路由数据), 根据权限显示左侧菜单, 退出登录时重置路由, 通过Vuex添加state管理

<router.js/>
export const asyncRoutes = [
  departmentRouter,
  attendanceRouter,
  approvalRouter,
]
<permission.js/>
    if (!store.getters.userId) {
        const { roles: { menus, points }} = await store.dispatch('user/getInfo')
        const asyncRoutesList = asyncRoutes.filter(item => menus.includes(item.meta.name))
        router.addRoutes([...asyncRoutesList, { path: '*', redirect: '/404', hidden: true }])
        store.commit('user/setPermissionList', asyncRoutesList)
        store.commit('user/setPoints', points)
        next(to.path) // 重定向
    } else {
        next()
    }
<store模块下的user.js/>
import { constantRoutes } from '@/router'
const state = {
  routes: constantRoutes // 静态路由的数组
}
// 存储所有的权限路由组件信息列表
setPermissionList(state, list) {
// console.log(list)
// console.log(state.permissionList)
// state.permissionList = [...state.permissionList, ...list]
// 这里产生一个bug , 之前使用的state.permissionList对之前路由信息拼接,还保留着上一用户的路由信息
state.permissionList = [...constantRoutes, ...list]},logout(context) {
// 路由重置方法 router.matcher
resetRouter() // 退出登录重置路由
// 重置vuex存储的路由信息数组
context.commit('setPermissionList', [])},

3.2 按钮级

封装自定义指令, 作用在按钮上, 判断存储用户信息的权限点是否有对应标识, 有则正常显示, 没有禁用或者不显示按钮

avatar
文章
阅读
粉丝