security - react +路由+安全

Question

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

我想保护 http://web.example.com:8080/myapp/#/user-profile url 表示只有登录的用户才能访问该路由。

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

访问管理保护 url，如果用户想要打开 protected 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 映射？ 你们有什么想法或解决方法如何在 React 中使用真实的 url 路由吗？

谢谢。

更新: 这是我的代码。 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

您可以按照评论中的建议使用browserHistory来删除#符号。如果您希望 react 应用程序的根目录为 /myapp/ 而不是 / 您可以尝试:

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

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

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