最佳实践：如何保护特定站点的公共 URL 的数据？

Question

如果我尝试对网址进行哈希处理，它会重定向到另一个页面，即重定向页面。

如果任何外部人员尝试访问公共 URL，则不应允许他们访问数据。

我需要正确的方法来处理 React JS 中的公共 URL。

Answer 1

要限制对 React.js 应用程序中某些页面或数据的访问，您可以实施各种策略。一种常见的方法是在服务器端处理身份验证和授权，确保只有授权用户才能访问某些资源。以下是您可以遵循的一般步骤：

认证：

实施用户认证系统。您可以使用流行的身份验证提供程序，例如 Firebase、Auth0，或推出您自己的服务器端身份验证。 授权：

用户通过身份验证后，实施授权系统来确定允许他们访问哪些资源或页面。这可以基于用户角色或特定权限。 保护路线：

使用React Router定义需要身份验证和授权的受保护路由。 React Router 提供了 PrivateRoute 概念，可用于包装仅应由经过身份验证的用户访问的组件。

import React from 'react';
import { Route, Redirect } from 'react-router-dom';

const PrivateRoute = ({ component: Component, isAuthenticated, ...rest }) => (
  <Route
    {...rest}
    render={(props) =>
      isAuthenticated ? <Component {...props} /> : <Redirect to="/login" />
    }
  />
);

export default PrivateRoute;

在你的路线中使用它，如下所示：

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import PrivateRoute from './PrivateRoute';
import HomePage from './HomePage';
import LoginPage from './LoginPage';

const App = () => {
  const isAuthenticated = /* logic to check if the user is authenticated */;

  return (
    <Router>
      <Switch>
        <Route path="/login" component={LoginPage} />
        <PrivateRoute
          path="/home"
          component={HomePage}
          isAuthenticated={isAuthenticated}
        />
      </Switch>
    </Router>
  );
};

export default App;