首页 > 其他分享 >项目经验|今日项目记录

项目经验|今日项目记录

时间:2023-01-12 00:58:19浏览次数:38  
标签:... 经验 const 记录 项目 调用 router called store

一、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!)
  • 需要调用以获得最新的用户列表里各个用户真实禁用与否的状态,以免其他用户禁用某用户等并发操作发生而使用户列表数据不是真实的(所以要从后台获取到最新数据)。

标签:...,经验,const,记录,项目,调用,router,called,store
From: https://www.cnblogs.com/djsz3y/p/projectExperience_itemRecord_20230112.html

相关文章

  • 项目经验|今日项目记录
    一、about弹框&表单打开弹框之后,判断弹框里的el-form表单ref='createFormRef':此ref是否存在,存在调用其ref的clearValidate()每每打开弹框时:this.showDrawerCreat......
  • 学习记录-外观模式
    外观模式外观模式(FacadePattern)隐藏系统的复杂性,并向客户端提供了一个客户端可以访问系统的接口。这种类型的设计模式属于结构型模式,它向现有的系统添加一个接口,来隐藏系......
  • 学习记录-观察者模式
    观察者模式当对象间存在一对多关系时,则使用观察者模式(ObserverPattern),也称之为发布-订阅模式。比如,当一个对象被修改时,则会自动通知依赖它的对象。观察者模式属于行为型......
  • 1.11刷题记录
    1.Yesecnodrumsticks1根据题目提示得知本题是lsb隐写打开附件得到一张图片用stegsolve打开flag{Yesec_1s_lsb}2.qsdz'sgirlfriend1根据题目提示得知:flag......
  • 记录一种独特的特殊网络流处理方式
    考虑如下抽象而来的问题:你有若干物品,每个物品都有两种属性。现在你想把他们分成若干组,使得每组内物品至少某种属性都相同,使得\(\sum_iS_i^2\)组大小平方和最大。利用......
  • cocos creator教程:项目构建工具 - jenkins 搭建及使用
    muzzik教程:项目构建工具-jenkins搭建及使用windows环境搭建流程1.下载及安装官网:https://www.jenkins.io/2.配置jenkins权限打开服务面板找到jenk......
  • 学习记录-适配器模式
    适配器模式适配器模式(AdapterPattern)是作为两个不兼容的接口之间的桥梁,它不会改变原先的接口。这种类型的设计模式属于结构型模式,它结合了两个独立接口的功能。这种模式......
  • 利用Java+Html+Jsp实现简单的MVC分层项目->实现表的增删改查
    graphTDView-->ServiceService-->ControllerService-->ViewController-->Service准备工作:无骨架创建一个maven项目,配置文件目录【增加webapp目录,在webapp下面一级添......
  • 手把手教你使用IDEA快速搭建一个SpringBoot项目
     手把手使用IDEA快速创建一个SpringBoot项目目录​​手把手使用IDEA快速创建一个SpringBoot项目​​​​1.NewProject选择maven,next​​​​2,填写GroupId,ArtifactId,Ver......
  • 【转】前后端分离项目(vue+springboot)集成pageoffice实现在线编辑office文件
    前后端分离项目下使用PageOffice原理图集成步骤前端vue项目在您Vue项目的根目录下index.html中引用后端项目根目录下pageoffice.js文件。例如:<scripttype="text/......