【学习打卡】第12天 Vue3 + TS仿知乎专栏企业级项目-原创手记-慕课网

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

课程内容

周末学习没有状态啦…才干了第8章的前五节
登录的时候会返回token，然后可以在全局数据中保存token，然后可以设置axios的默认授权信息header.common.Authorization。
不过页面刷新的时候会导致登录状态的丢失，所以可以在页面加载的时候先判断有没有token，有token的话直接去获取用户信息更新全局数据。
如果在获取数据过程中，token过期，或者在登录POST等请求的时候同样会有请求错误，需要一个全局的异常处理，方法是设置一个error信息，当error为true的时候在全局里抛出来。
图片描述
关键代码：

const token = computed(() => store.state.token)
onMounted(() => {
  if (!currentUser.value.isLogin && token.value) {
    axios.defaults.headers.common.Authorization = `Bearer ${token.value}`
    store.dispatch('fetchCurrentUser')
  }
})

登录中的处理

store
.dispatch('loginAndFetch', payload)
.then((data) => {
  console.log(data)
  router.push('/')
})
.catch((e) => {
  console.log(e)
})

课程收获

要明确处理的逻辑，确保逻辑的解耦可以把数据放在store里，然后在请求和响应拦截器中处理数据的更新。
另外store里还推荐在dispatch里连续执行的写法：

loginAndFetch({ dispatch }, loginData) {
  return dispatch('login', loginData).then(() => {
    return dispatch('fetchCurrentUser')
  })
}

图片描述