手记

【学习打卡】第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')
  })
}

0人推荐
随时随地看视频
慕课网APP