示例Redux中间件

Question

我刚刚在React + Redux应用程序中完成了基于会话（cookie）的登录系统。然后我意识到无法用任何方法检查用户是否从另一个位置（不同的chrome标签，删除cookie，服务器会话无效，到期）注销。

我当时也在Instagram网站上查看使用React的情况。看来，如果您在其他浏览器选项卡中注销，则仍然可以路由至应用内的其他地方，直到您点击某些API提取...然后网站会自动刷新...

但是，还有一种系统会意识到即使我执行了一些不需要API调用的操作，用户仍未登录。

那么，如何以最佳方式实现这些情况？开发时如何处理它们。

Answer 1

我不完全确定Instagram身份验证的工作方式，但我想它是由中间件处理的，当您请求API调用时，它将在启动之前检查用户是否具有存储在Cookies中的Auth令牌或其他内容。 API请求。

您可以通过添加Redux中间件轻松地自己执行此操作，该中间件会在分派下一个操作之前检查cookie是否存在。如果不存在，您可以向用户返回错误消息，或者重定向他们，甚至可以调度redux操作来清除所有已加载的数据，然后最终将它们重定向回登录页面。

Instagram只在遇到API调用时才锁定用户的原因是，如果删除了cookie，您就无法对用户帐户做任何危险的事情，因为您无法更改其帐户（注释，发布，更改帐户设置等），而无需与API进行交互。因此，不必在每次调度动作时都运行中间件，从技术上讲，它们使应用程序的性能更高。

示例Redux中间件

import Cookies from 'js-cookie';

const clientHasToken = store => next => action => {
    const authToken = Cookies.get('auth');
    
    if (!authToken) {
      // redirects user, but you could do anything here
      return window.location.href = '/login';
    }
  
    // if user has an auth token, proceed to the next action
    next(action);
};

export default clientHasToken;

在React应用中处理外部注销

1 个答案:

示例Redux中间件