用于身份验证的 PrivateRoute 组件

Posted 2023-02-21

【中文标题】用于身份验证的 PrivateRoute 组件

【英文标题】：PrivateRoute component for authentification

【发布时间】：2020-06-01 13:17:33

【问题描述】：

我正在开发一个 Reactjs-nodejs 应用程序。我想做一个 JWT 认证。当我们登录时，我给用户一个唯一的令牌。然后，多亏了这个令牌，如果它有效，我允许用户浏览我的路由器。我的私人路线组件是这样的： PrivateRoute

我的函数getId是这样的：

异步函数 getId() 让 res = await axios('_/api/users/me',config).catch(err => console.log(err));

返回 res+1;

最后配置组件是存储在 localStorage 中的令牌：

常量配置 = 标头：授权：$window.localStorage.getItem("token") ;

GetId() 如果登录则返回用户的id，否则为null。

现在的问题是我的 privateRoute 总是重定向到“/”路径。我认为这是因为 axios(promise) 给我 userId 太晚了。如果你理解得很好，如果你有解决方案，请告诉我。 谢谢你

【问题讨论】：

欢迎来到*** :) 请将链接图像中的相关代码移至您的问题中。

【参考方案1】：

如果您使用的是 redux，您可以进行以下操作：

减速器：

case LOGIN_ADMIN_SUCCESS:
            localStorage.setItem("token", action.payload.token);
            return 
                ...state,
                user: action.payload,
                isSignedIn: true,
                loadingSignIn: false,
                token: action.payload.token,
            ;

然后在您的私有路由器中，您必须检查这些值，例如

const PrivateRoute = ( component: Component, admin, ...rest ) => (
    <Route
        ...rest
        render=(props) => 
            if (admin.loadingSignIn) 
                return <h3>Loading...</h3>;
             else if (!admin.isSignedIn) 
                return <Redirect to="/login" />;
             else 
                return <Component ...props />;
            
        
    />
);

【讨论】：

你好，我不是，而且我的水平还不够了解redux的一切。无论如何感谢您的回答

【参考方案2】：

你可以像这样创建私有路由。

const PrivateRoute = ( component: Component, ...props ) => 
  return (
    <Route
      ...props
      render=innerProps =>
        localStorage.getItem("Token") ? (
          <Component ...innerProps />
        ) : (
          <Redirect
            to=
              pathname: "/",
              state:  from: props.location 
            
          />
        )
      
    />
  );
;

那么你可以使用

<PrivateRoute path="/" component=FIlname />

【讨论】：

你好，问题是如果我在本地存储中手动创建值令牌，我可以访问页面，所以它可能不是正确的解决方案：/