如何通过使用 react 和 typescript 输入 url 来限制用户访问特定页面？答案

【问题标题】：How to restrict user from accessing a particular page by typing the url using react and typescript?如何通过使用 react 和 typescript 输入 url 来限制用户访问特定页面？
【发布时间】：2020-06-08 12:08:31
【问题描述】：

我想限制带有 url 的页面说“myurl/view”。只有管理员用户可以查看此页面，其他用户无法访问此页面。

当前，当单击查看按钮时，它会重定向到 url“/view”。并且此视图按钮仅对管理员用户可见。

下面是我的代码，

render = () => {
    const admin = //some logic here and this admin value is boolean;
    return (
        <>  
            {admin && <a href="/view">
                <button>View</button>
             }
        </>
    );
}

从上面的代码可以看出，这个按钮只对管理员可见，点击它会重定向到“/view”。

现在，当非管理员用户键入“/view”时，它会将他带到他不应该查看的同一页面。

如何使用反应路由器限制此访问。我是第一次这样做，不知道该怎么做。有人可以帮我解决这个问题。谢谢。

【问题讨论】：

标签： reactjs typescript

【解决方案1】：

您可以使用 react-router-dom 中的重定向组件。 Here 是文档页面。这是根据您的情况使用的示例。

<Route exact path="/view">
  {isAdmin ? <AdminPage /> :<Redirect to="/" />}
</Route>

仅供参考，这是您导入它的方式

import { Redirect } from "react-router-dom";

【讨论】：

所以这项工作是否有效，例如用户在“/view”中，然后用户不是管理员，这仍然有效。这意味着在这种情况下他应该被重定向到主页
我不确定你的意思。如果你说的是用户在“/view”路由中的场景，最初是因为他被授权，然后突然因为他的令牌过期，他不再被授权查看该页面；在这种情况下，如果您的isAdmin 状态可靠，则应在令牌过期时将用户重定向回主页。

【解决方案2】：

存储一个 jwt 令牌并在后端验证该令牌并查看该令牌是否对应于尝试访问 url 的连接帐户。如果令牌由管理员拥有，则返回管理页面，否则会出现错误页面。

【讨论】：