继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

是阿歪
关注TA
已关注
手记 23
粉丝 2
获赞 2

课程名称: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')
  })
}

图片描述

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP