反应 + 路由 + 安全

Question

我正在使用 React 和 react-router 构建一个 Web 应用程序，我想使用现有的外部访问管理基础架构 (OpenAM) 保护我的 React 应用程序的一些路由。

我想保护http://web.example.com:8080/myapp/#/user-profile url，这意味着只有登录的用户才能访问此路由。

我还有其他一些公开的路线，任何用户都可以打开它们，例如http://web.example.com:8080/myapp/#/welcome。

访问管理保护 url，如果用户想要打开受保护的 url，则访问管理会显示一个登录表单，成功登录后将显示原始请求的 url。

这里的问题是 react-router 在 '#' 字符之后添加了路由信息，并且上面提到的两个不同的 url 从访问管理器的角度来看是相同的，因为它们引用了相同的 Web 资源（/myapp）。这两个 url 之间的区别出现在 '#' 字符之后。

我需要有没有像这样的“#”字符的真实网址：

• http://web.example.com:8080/myapp/user-profile
• http://web.example.com:8080/myapp/welcome

有没有办法在 React 中使用真实的 url 映射？ 你们有任何想法或解决方法如何使用真正的 url 路由和 react 吗？

谢谢。

更新： 这是我的代码。 Web 浏览器中的 url 看起来不错，但我收到“关于不匹配任何路由”的错误。请求网址：http://web.example.com:8080/myapp/about

import {Router, Route, IndexRoute, useRouterHistory} from 'react-router';
import {createHistory} from 'history';    

const browserHistory = useRouterHistory(createHistory) ({
   basename: '/myapp/'
});

ReactDOM.render(
   <Router history={browserHistory}>
      <Route path="/" component={MainLayout}>
         <IndexRoute component={Home} />
         <Route path="about" component={About} />
      </Route>
   </Router>
)

Answer 1

您可以按照 cmets 中的建议使用 browserHistory 来摆脱 # 符号。如果你希望你的 react-application 的根是 /myapp/ 而不是 / 你可以试试：

import {Router, Route, useRouterHistory} from 'react-router';
import {createHistory} from 'history';    

const browserHistory = useRouterHistory(createHistory)({basename: '/myapp/'});

ReactDOM.render(
  <Router history={browserHistory}>
    ...
  </Router>
)