关键词：
【中文标题】保持 React 基于 Cookie 的身份验证状态【英文标题】：Persist React Cookie-based Authentication state 【发布时间】：2020-09-16 04:17:18 【问题描述】：我正在使用 React-Router 和 Redux 构建身份验证流程，其中我的后端以会话 Cookie（带有 Set-Cookie HTTP 标头）的形式返回 JWT，前端使用该 JWT 来发出后续请求。 （我没有使用 localStorage，因为一般建议是首选 Cookie，因为在 XSS 的情况下它可能被 JS 读取）
// my App component
const isAuthenticated = useSelector((state) => state.user);
<Container>
!isAuthenticated ? (
<LoginForm />
) : (
<Switch>
<Route exact path="/" component=MessageList />
<Route path="/messages" component=MessageList />
<Route path="/login" component=LoginForm />
<Route path="/message/:id" component=MessageContainer />
</Switch>
)
</Container>
// the api requests themselves abstracted
const login = (data) =>
axios
.post("auth/login", data, withCredentials: true )
.then((response) => response.data);
const fetchItems = (page, token) =>
axios(`message/list/page/$page`,
withCredentials: true,
).then((response) => response.data);
// actions
function handleError(err)
return
type: "ERROR_OCCURED",
payload: err,
;
function shouldFetchMessages(state, page)
if (!state.message.all.length)
return true;
else if (state.message.isFetching)
return false;
else
return state.message.all;
export let getMessages = (page = 1) => async (dispatch, getState) =>
let err, response;
dispatch(requestMessages(page));
[err, response] = await to(api.fetchItems(page, getState().user.accessToken));
if (err)
return handleError(err);
return dispatch(receiveMessages(response));
;
export function getMessagesIfNeeded(page)
return (dispatch, getState) =>
if (shouldFetchMessages(getState(), page))
return dispatch(getMessages(page));
;
// reducer
// where would the localStorage isAuthenticated value be synced with the store?
export default (state = defaultState, action) =>
switch (action.type)
// skipped the other reducers for brevity
case "ERROR_OCCURED":
return
...state,
isAuthenticated: false, // this should be saved in the localStorage
;
default:
return state;
;
我需要有一个BOOLEAN 来保存isAuthenticated 的“状态”，这样我才能显示适当的组件。
我的主要问题是 Redux 状态当然不会在页面刷新时保持不变。
我想有一个localStorage 变量，（或一个新的cookie）。 （包含 JWT 的 Cookie 是httpOnly，据我了解，JavaScript 无法访问）。
问题：
这是一种既定做法 如何处理 JWT 过期？ （我想如果 HTTP 请求失败并返回 401，我可以将其设置为 false。） localStorage 变量在哪里与 Redux 状态同步以避免我的 Reducer 中的副作用？【问题讨论】：
【参考方案1】：我绝对不是这方面的专家，但在我的应用程序中，每当我设置或删除 httpOnly JWT cookie 时，我也会设置/删除一个常规 cookie，其中包含有关用户是否登录以及他们的角色的信息.然后，您可以在客户端检查一些内容，而不会暴露任何敏感内容。
【讨论】：
基于 Cookie 的身份验证
】基于Cookie的身份验证【英文标题】：CookieBasedAuthentication【发布时间】：2020-10-0812:15:36【问题描述】：我想知道如何为mvc.net框架应用程序实现基于cookie的身份验证。我使用过.net核心，并且我已经看到它的实现是多么容易，但我... 查看详情
基于 Cookie 的身份验证和 Web API
】基于Cookie的身份验证和WebAPI【英文标题】：Cookie-basedauthenticationandwebAPI【发布时间】：2014-05-2817:21:53【问题描述】：我正在为我的服务构建一个公共WebAPI。网页和原生移动应用程序（iOS、Android和Windows8）同样会使用它。我应该... 查看详情
React Native - 在 WebView 中使用 cookie 进行身份验证
】ReactNative-在WebView中使用cookie进行身份验证【英文标题】：ReactNative-UsecookiestoauthenticateinWebView【发布时间】：2021-03-2709:26:43【问题描述】：所以我已经为ReactNative应用程序提供了几个API。一个端点用于身份验证，它返回一个允许... 查看详情
Web 身份验证状态 - 会话与 Cookie？
】Web身份验证状态-会话与Cookie？【英文标题】：Webauthenticationstate-SessionvsCookie?【发布时间】：2010-09-2606:34:34【问题描述】：在页面之间进行身份验证和跟踪用户身份验证状态的最佳方法是什么？有人说会话状态，有人说cookie？... 查看详情
Laravel 中基于 Vue cookie 的身份验证
】Laravel中基于Vuecookie的身份验证【英文标题】：Vuecookie-basedauthenticationinLaravel【发布时间】：2021-05-2600:11:32【问题描述】：通过阅读Laravel文档，似乎在使用SanctumVue时只会使用基于cookie的身份验证。我试图将现有应用程序（使用L... 查看详情
在不使用电子邮件的情况下使用基于令牌和基于 cookie 的身份验证
】在不使用电子邮件的情况下使用基于令牌和基于cookie的身份验证【英文标题】：Usingtoken-basedtogetherwithcookie-basedauthenticationwithoutemail【发布时间】：2019-12-1812:36:42【问题描述】：我正在使用Identity开发.NETCoreMVC项目。我目前有一... 查看详情
如何使用基于 cookie 的身份验证授权 Web API
】如何使用基于cookie的身份验证授权WebAPI【英文标题】：HowauthorizeawebAPIusingacookiebasedauthentication【发布时间】：2021-08-0909:41:36【问题描述】：我有一个MCV核心应用程序，它使用基于cookie的身份验证（将用户凭据存储在数据库中）... 查看详情
基于令牌的身份验证的安全性
】基于令牌的身份验证的安全性【英文标题】：SecurityofTokenBasedAuthentication【发布时间】：2011-06-0800:00:41【问题描述】：我对基于令牌的身份验证的理解是，在进行身份验证时（可能通过ssl），令牌会被传递给用户，以便即时进... 查看详情
.Net Core 2.1 与 IdentityServer4 Cookie 和基于 API JWT 的同一应用程序的身份验证
】.NetCore2.1与IdentityServer4Cookie和基于APIJWT的同一应用程序的身份验证【英文标题】：.NetCore2.1withIdentityServer4CookieandAPIJWTbasedauthenticationforthesameapp【发布时间】：2019-06-0213:47:41【问题描述】：我有一个IdentityServer设置，带有一个API和... 查看详情
SPA 的 Cookie 与基于令牌的身份验证？
】SPA的Cookie与基于令牌的身份验证？【英文标题】：CookievstokenbasedauthenticationforSPA?【发布时间】：2015-10-2921:30:02【问题描述】：我正在使用AngularJS和Spring作为后端构建单页应用程序。为了使我的后端无状态，我最近研究了JWT（JSO... 查看详情
phonegap：基于 cookie 的身份验证 (PHP) 不起作用 [webview]
】phonegap：基于cookie的身份验证(PHP)不起作用[webview]【英文标题】：phonegap:cookiebasedauthentication(PHP)notworking[webview]【发布时间】：2011-04-1204:18:34【问题描述】：我正在开发一个使用senchatouch、HTML5和phonegap作为包装器的移动网络应用... 查看详情
使用 React Native / Redux 和 Firebase 保持身份验证
】使用ReactNative/Redux和Firebase保持身份验证【英文标题】：PersistauthenticationwithReactNative/ReduxandFirebase【发布时间】：2017-05-1004:35:56【问题描述】：我有一个相当简单的Reactnative/Redux应用程序，最近添加了带有AsyncStorage的Reduxpersist以... 查看详情
iOS 使用基于 Cookie 的身份验证从服务器流式传输音频
】iOS使用基于Cookie的身份验证从服务器流式传输音频【英文标题】：iOSStreamAudioFromServerWithCookie-basedAuth【发布时间】：2011-12-2109:18:39【问题描述】：我正在尝试从受基于会话的身份验证保护的服务器流式传输音频文件，我注意到M... 查看详情
在 Chromecast Receiver 中利用基于 cookie 的身份验证
】在ChromecastReceiver中利用基于cookie的身份验证【英文标题】：Leveragingcookie-basedauthenticationinChromecastReceiver【发布时间】：2014-02-0518:45:21【问题描述】：当对特定媒体资源的访问取决于令牌可以提供的某种授权时，我已经成功地将... 查看详情
具有基于 HttpOnly cookie 的身份验证和会话管理的单页应用程序
】具有基于HttpOnlycookie的身份验证和会话管理的单页应用程序【英文标题】：SinglepageapplicationwithHttpOnlycookie-basedauthenticationandsessionmanagement【发布时间】：2017-08-0701:22:04【问题描述】：几天来，我一直在为我的单页应用程序寻找一... 查看详情
删除 Worklight Adapter 中的 Cookie：多个会话使用基于相同适配器的身份验证
】删除WorklightAdapter中的Cookie：多个会话使用基于相同适配器的身份验证【英文标题】：RemoveCookiesinWorklightAdapter:multiplesessionsusingsameadapterbasedauthentication【发布时间】：2013-02-2811:51:56【问题描述】：我正在使用Worklight适配器并使用... 查看详情
关于session和cookie个人见解
...份验证。这样就产生了session机制，能够理解成Session基于保持状态的Webserver的方法，那么cookie就是基于保持状态的client方法。因为一般的Session唯一标示SessionID又依赖于cookie的存储（这里仅仅 查看详情
在反应中使用 cookie 的客户端身份验证和受保护的路由
...程序。它是使用HOC实现的，它检查jwt令牌是否存在并允许基于 查看详情