时间戳

首页 > 解决方案 > React Router 在隐身模式下无法识别身份验证令牌（AAD B2C）

reactjs - React Router 在隐身模式下无法识别身份验证令牌（AAD B2C）

问题描述

我正在使用react-azure-adb2c包对我的 Web 应用程序中的用户进行身份验证。我react-router-dom设置了一个需要身份验证的路由：

import React from 'react';
import { Route, BrowserRouter as Router, Switch } from 'react-router-dom';
import authentication from 'react-azure-adb2c';
import Home from '../Home';
import Products from '../Products';

authentication.initialize({
  instance: 'https://login.microsoftonline.com/tfp/',
  tenant: process.env.REACT_APP_AAD_DOMAIN,
  signInPolicy: process.env.REACT_APP_AAD_POLICY_ID,
  applicationId: process.env.REACT_APP_AAD_CLIENT_ID,
  scopes: [process.env.REACT_APP_AAD_SCOPES],
  cacheLocation: 'sessionStorage',
  redirectUri: process.env.REACT_APP_URL,
  postLogoutRedirectUri: process.env.REACT_APP_URL,
});

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route
          exact
          path="/products"
          component={authentication.required(Products)}
        />
      </Switch>
    </Router>
  );
}

export default App;

这在普通浏览器窗口中按预期工作，用户单击指向 的链接/products，被重定向到 Azure AD B2C 登录页面，在登录时被推回应用程序，然后重定向到/products.

但是在隐身浏览器中，当用户在登录后被推回应用程序时，他们会再次被重定向回 Azure 登录页面。如果他们再次使用第二个提示登录，那么他们会被推送到/products，因为他们应该第一次登录。

我的猜测是，在应用程序识别令牌之前，路由器正试图将用户重定向到经过身份验证的路由，但我不太确定。同样，这只发生在隐身浏览器中。

标签： reactjsreact-router-domincognito-mode

解决方案

这是因为隐身/私人浏览窗口不会保留本地/会话存储。

您可以在 Chrome 和 Firefox 中使用 localStorage，但是私有存储独立于非私有/私有窗口，即在私有模式下设置项目不会反映回非私有模式。

当您在隐私浏览或隐身模式下打开浏览器时，存储在正常浏览会话中的本地存储数据将不可用。

MDN 参考：

启用隐私浏览模式时，会创建临时数据库用于 cookie 和本地存储；关闭隐私浏览模式后，这些数据库将被丢弃，并重新激活常规数据库。临时 cookie 和本地存储数据库一开始是空的。 更多。

推荐阅读