项目经验|今日项目记录

一、about 弹框 & 表单

1. 打开弹框之后，判断弹框里的el-form表单ref='createFormRef'：此ref是否存在，存在调用其ref的clearValidate()

   • 每每打开弹框时：

   this.showDrawerCreate()
   this.$refs.createFormRef ? this.$refs.createFormRef.clearValidate() : ''
   

   具体问题具体分析

2. 若切换弹框时，el-form的rules属性为动态控制的，则需加上:validate-on-rule-change="false"属性

   <el-form
     class="apw__form"
     :model="createForm"
     ref="createFormRef"
     key="createFormRef"
     label-position="right"
     label-width="100px"
     :rules="
       userManage_createType === 'edit'
         ? updatePwdForm_rulesList
         : createForm_rulesList
     "
     :validate-on-rule-change="false"
   >
   ...
   </el-form>
   

二、about 路由前置守卫 beforeEach

• 获取用户信息...等接口，非登录路由时，store里getters的hasUserInfo不存在就会分发调用getUserInfo方法从而调获取用户信息接口，
• 而登录成功后跳转到其他主要页面时，由于beforeEach里多次调用（也许无线循环的情况），上次异步调用的getUserInfo接口也许还处于pending状态，此状态下store里的hasUserInfo还是false，以至于获取用户信息getUserInfo等接口调用两次（也许会调用更多次）；
  为解决此种问题：
  加个标识，用了数组标识，可以换成对象标识运行可能更快。
  pending时放数组标识里，fulfilled时从数组标识里取出。
• 登录鉴权：

  permission.js

  import router from '@/router'
  import store from '@/store'
  
  const whiteList = ['/login'] // 白
  const called_aboutStoreData = [] // log asynchronous call
  const hasBeenCalled = (str) => called_aboutStoreData.includes(str)
  
  router.beforeEach(async (to, from, next) => {
    if (store.getters.token) {
      if (to.path === '/login') {
        next('/login')
      } else {
        if (!store.getters.hasUserInfo && !hasBeenCalled('user')) {
          // store No data & its Never called
          called_aboutStoreData.push('user') // record has been called
          await store.dispatch('data/getUserInfo')
          const index = called_aboutStoreData.findIndex((d) => d === 'user')
          index > -1 ? called_aboutStoreData.splice(index, 1) : '' //`fulfilled`时从数组标识里取出
          return next(to.path)
        }
        ...
        next()
      }
    } else {
      if (whiteList.indexOf(to.path) > -1) {
        next()
      } else {
        next('/login')
      }
    }
  })
  
  

三、about 所有用户被禁用都要跳转登录

1. 调用的store里的logout接口，里有个resetRouter()方法报错，报错导致登录页没跳转成功：

   router/index.js

   import Vue from 'vue'
   import VueRouter from 'vue-router'
   import layout from '@/layout/index'
   import store from '@/store'
   
   Vue.use(VueRouter)
   //获取原型对象上的push函数
   const originalPush = VueRouter.prototype.push
   //修改原型对象中的push方法
   VueRouter.prototype.push = function push(location) {
     return originalPush.call(this, location).catch((err) => err)
   }
   
   const publicRoutes = [...]
   
   const privateRoutes = [...]
   
   const router = new VueRouter({
     routes: [...publicRoutes, ...privateRoutes]
   })
   
   /**
    * 初始化路由表
    */
   export function resetRouter() {
     if (store.getters.userInfo && store.getters.menuList) {
       // const menus = store.getters.menuList
       // menus.forEach((menu) => {
       //   const menuName = menu.menuPath.replace('/', '')
       //   router.removeRoute(menuName) // menuName 即上面路由的 name 值
       // })
       const newRouter = new VueRouter({
         routes: [...publicRoutes, ...privateRoutes] // 注意：不是动态路由
       })
       router.options.routes = newRouter.options.routes
       router.matcher = newRouter.matcher // the relevant part
     }
   }
   
   export default router
   

2. about 用户禁用要调用用户列表接口的自我确认（有同事觉得不需要调用，经过思考这是需要的，启禁用的接口以前还会传status，现在的不传只传id，it's very good!）

• 需要调用以获得最新的用户列表里各个用户真实禁用与否的状态，以免其他用户禁用某用户等并发操作发生而使用户列表数据不是真实的（所以要从后台获取到最新数据）。