使用 Redux+TypeScript 实现注销 [英] implement logout using Redux+TypeScript

问题描述

我有一个登录页面，如果登录成功并返回一个 accessToken，它会重定向到一个私有的 /panel 页面.我正在使用 Redux 商店检查 privateRoute 组件中的令牌.

I have a login page, which redirects to a private /panel page if the login is successful and an accessToken is returned. I'm using Redux store to check for the token in the privateRoute component.

我面临的问题:

• 我想使用退出图标从 /panel 页面实现注销.如果我尝试在组合减速器中添加另一个减速器，则会出现 TypeScript 错误.

• I want to implement logout from the /panel page using the exit icon. If I try to add another reducer in the combined reducer, I get TypeScript errors.

从退出图标实现注销的最佳方法是什么?我应该使用相同的 tokenReducer 在 switch 中添加一个 LOGOUTcase 吗?商店中的 accessToken 需要以某种方式删除.为了删除状态中的有效负载，我应该使用过滤器吗?但具体在哪里?

What would be the best way to implement logout from the exit icon? Should I use the same tokenReducer add a LOGOUTcase in the switch? The accessToken from the store needs to be deleted somehow. For deleting the payload in the state, should I use filter? But where exactly?

由于我使用了持久化，所以 accessToken 保留在本地存储中.因此，即使我重新加载代码和框(或终止并在本地主机中重新运行我的应用程序)，下一次，我将能够访问 /panel 甚至无需登录.

Since I'm using persist, the accessToken remains in the local storage. So even if I reload the codesandbox (or terminate and re-run my app in localhost), the next time, I will be able to access /panelwithout even logging in.

代码沙盒:

https://codesandbox.io/s/frosty-shannon-0ivez?file=/src/store/reducers/index.ts

邮箱:[e-mail]

Email: [e-mail]

密码:检查

唯一的主要区别是，在原始代码中，我没有手动编写 accessToken，而是运行了 GraphQL 突变.如果登录成功，则返回一个 accessToken 并发送如下:

The only main difference is that instead of manually writing the accessToken, in the original code, I am running a GraphQL mutation. If the login is successful, an accessToken is returned and dispatched like this:

 dispatch({ type: 'LOGIN', payload: data.loginEmail.accessToken });

其中 loginEmail 是突变，accessToken 是返回的字符串.如果有人可以复制沙盒并指导我，那就太好了.

where loginEmailis the mutation and accessTokenis the string returned. If someone could copy the Sandbox and guide me, that would be great.

推荐答案

对于在哪里存储令牌"部分:正如我们所知，我们通常在 cookie 中存储一个 sessionID 或其他东西作为服务器保持用户会话的标识符.如果我们需要存储一些其他的令牌，大多数情况下我们仍然使用 cookie，比如 laravel和 axios 对待 csrf-token:存储在 cookie 中，在标题中发送发送 xhr 请求时，或将其作为隐藏输入放置在表单中(因此它会与其他表单字段一起发送).

For the "where to store the token" part: As we know we usually store a sessionID or something in the cookie as an identifier for the server to keep the user's session. If we need to store some other token, mostly we still use cookie, like how laravel and axios treat csrf-token: store in cookie, send it in header when sending an xhr request, or place it as a hidden input in a form (so it gets sent along with other form fields).

不太明白问题的其他部分，但是，我想说的是，按照您喜欢的方式构建您的 redux 存储代码，只要它们干净、可读、易于维护.

Don't quite get other parts of the question but, I'd say structure your redux store code however you like, as long as they are clean, readable, easy to maintain.

这篇关于使用 Redux+TypeScript 实现注销的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！