【学习打卡】第13天 Vue3 + TS仿知乎专栏企业级项目

课程名称：Vue3 + TS仿知乎专栏企业级项目
课程章节：第8章 6~12节 & 第9章
主讲老师：张轩

课程内容

8、9章分别为权限管理和上传组件
权限管理中老师用循序渐进的方式教我们把Message组件改造成可以使用API调用的方式，刚开始用的vnode使用createApp挂载的，有点杀鸡用牛刀的感觉，后来改成了h函数+render函数的方式。
上传组件这里的门道非常的，基本的需求有：上传前的检查、自定义信息（上传前、上传中和上传后）、可视化进度条、上传预览、删除图片等，篇幅所限也比较详细地讲了插槽的运用，在上传的时候判断props是否传入来触发beforeUpload、uploading、fileUploaded和uploadedError等阶段。
路由验证变得复杂起来了，因为了结合后端API交互，还有一些全局状态的管理。之前的路由状态都是在App.vue中管理的，有些不到位不合适越是划好流程图后获取用户信息的逻辑在beforeEach钩子中使用。

router.beforeEach((to, from, next) => {
  const { user, token } = store.state
  const { requiredLogin, redirectAlreadyLogin } = to.meta
  if (!user.isLogin) {
    if (token) {
      axios.defaults.headers.common.Authorization = `Bearer ${token}`
      store
        .dispatch('fetchCurrentUser')
        .then(() => {
          if (redirectAlreadyLogin) {
            next('/')
          } else {
            next()
          }
        })
        .catch((e) => {
          console.error(e)
          localStorage.removeItem('token')
          next('login')
        })
    } else {
      if (requiredLogin) {
        next('login')
      } else {
        next()
      }
    }
  } else {
    if (redirectAlreadyLogin) {
      next('/')
    } else {
      next()
    }
  }
})

课程收获

这两章的干货满满，循序渐进的方式可以让我们理想改进的思路，对业务的需求有更深刻的理解。特别是Uploader的讲解，接下来自己实现一下比较完整的逻辑吧。