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登录页面，在登录时被推送回应用程序，然后重定向到{{ 1}}。

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

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

解决方法

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

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

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

MDN参考：

启用私有浏览模式后，将创建临时数据库以用于Cookie和本地存储；关闭私人浏览模式并重新激活常规数据库后，这些数据库将被丢弃。临时cookie和本地存储数据库开始时为空。 more。