React redux登录验证localStorage undefined----已确认

#1

条件:使用服务端渲染

问题
如果任意输入一个页面,在router的onenter中检查auth状态,此时auth调用最终会访问localStorage.token,但此时页面未加载,localStorage总是会报undefined。【在login页面中,点击提交按钮,访问localStorage没有问题,此时页面加载完成了】
那这种情况下该如何做验证?

补充:github上有模拟登录验证的,客户端渲染,在进入任一页面时访问localStorage都正常。那服务端渲染和客户端渲染是造成这个现象的原因吗?

谢谢回复!

#2

已确认问题:

  1. client端渲染时,react文件运行时,请求页面框架已经加载完成,window.localStorage已经可以使用。所以client端渲染可以任意地方访问localStorage,当然也可以做登录验证。

  2. 服务端渲染时,请求页面框架还未加载时,react文件已在server端运行,window还不存在,localStorage必然不能访问。

解决方法:
服务端渲染时,componentDidMount存在于页面的生命周期,在componentDidMount方法中访问localStorage执行验证动作

【使用cookie的方法没有验证过】

1 Like
#3

猜也是生命周期的问题。不过登录验证一般用cookie

#4

搜了不少介绍,觉得用cookie和token的各有不少,在用法上感觉也是几乎是相同的。

我原本的意图是想从一个非react页面登录,然后跳转到需要授权的react页面。通过token和cookie似乎都可以达到目的。不过暂时放弃这种做法了。

#5

用cookie应该不会有undefined这个问题

#6

服务端渲染就代表要开启中间 node 服务,在 node 服务中加一层 机制,用于存储 redux 状态树中某一部分,第一次渲染通过 cookie生成默认状态