关于 store.state的数据,在刷新页面过程中的变化。

来源:9-9 作业 完成文章详情页

lanrtop

2022-11-16

老师,你好。

登录操作过程

1. 表单输入数据
2. 程序 将数据打包
3. 程序 依次请求2个指定接口链接
	a. login 登录操作  携带打包表单的数据,使用post请求后端登录接口,获得返回的token数据
	将数据储存在本地2个地方
	state.token = token
	localStorage.setItem('token', token)
	进行 浏览器头信息的 鉴权登录
	axios.defaults.headers.common['Authorization'] = `Bearer ${token}`

   b.    fetchCurrentUser  使用get方法,请求后端查询登录账户信息接口
	因为自己的头部信息已经携带鉴权信息,所以这个接口允许正常访问,返回数据
	1个返回 到 调用函数的那一层来操作成功或错误提示。
	1个返回值rawData 覆盖到 本地的 state.user 中
	fetchCurrentUser(state, rawData) {
	state.user = { isLogin: true, ...rawData.data }
	}
	并且 isLogin值改为 true

问题:当我刷新页面后,token 会一直保持在 localStorage 中,但是 store.state 里面的数据会有什么变化吗??
情况1:保持登录前一样的值
情况2:通过 store.ts 的初始化 store.state的数据变成默认值吗?

state: {
    token: localStorage.getItem('token') || '',
    error: { status: false },
    loading: false,
    columns: { data: {}, currentPage: 0, total: 0 },
    posts: { data: {}, loadedColumns: [] },
    user: { isLogin: false }
  },

再通过 router.ts 中 ,每次访问页面触发 导航守卫来过滤信息时,凭借 store.state 中的已有的token 来 进行登录和 获取登录账户信息修改 store.state中的默认值。

if (!user.isLogin) {
if (token) {
  axios.defaults.headers.common.Authorization = `Bearer ${token}`
  store.dispatch('fetchCurrentUser').then(() => {
    if (redirectAlreadyLogin) {
      next('/')
    } else {
      next()
    }
  })

有点迷糊了
。。。到底属于哪种情况?。。

写回答

1回答

张轩

2022-11-17

同学你好 

你说的过程都是对的啊

当刷新页面以后,任何的状态都消失了,也就是 state 都变成了初始值,唯一留下的就是 token,因为它在本地存储中,当刷新页面以后,路由守卫发现 token 有值,但是 state 中 user 并没有任何登录,就会发起一次 fetchCurrent 请求,看看当前用户是否登录,然后继续下面的流程。

0
1
lanrtop
非常感谢!
2022-11-17
共1条回复

Vue3 + TS 仿知乎专栏企业级项目

带你完成前后端分离复杂项目,率先掌握 vue3 造轮子技能

3142 学习 · 2313 问题

查看课程