关于 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回答
-
同学你好
你说的过程都是对的啊
当刷新页面以后,任何的状态都消失了,也就是 state 都变成了初始值,唯一留下的就是 token,因为它在本地存储中,当刷新页面以后,路由守卫发现 token 有值,但是 state 中 user 并没有任何登录,就会发起一次 fetchCurrent 请求,看看当前用户是否登录,然后继续下面的流程。
012022-11-17
相似问题