我想知道如果我的应用程序正在渲染服务器端,如何使用React Router精确实现身份验证流程?
场景:
当用户第一次到达应用程序时,我们调用 onEnter
路由器方法以检查是否存在任何当前用户( localStorage
),如果他们是,我们将其重定向到他们的仪表板,否则我们将它们重定向到登录页面 .
因此,当我的应用程序访问我的受保护路由 onEnter
时,理想情况下应该发生什么:
onEnter: () => {
if (localStorage.getItem('authToken')) {
// Authenticate and redirect user to intended path
} else {
// Redirect the user to the login page
}
}
这里的问题是因为我们're rendering server-side, we don' t可以访问诸如 localStorage
之类的东西 . 任何人都可以建议一种方法来克服这个问题,或者使用React Router处理服务器端身份验证的更好方法吗?
1 回答
您可以使用context,例如:
包装:
然后,您可以从任何组件在服务器或客户端上访问它:
简单的客户端检查像
typeof document !== 'undefined'