Reactjs 使用react to secure routes处理accesstoken的正确方法是什么？

我有一个express后端，它在登录时返回一个访问令牌作为响应，一个刷新令牌作为cookie

      const sendAccessToken = (res , req, accesstoken) => {
        res.send({
            accesstoken,
            email: req.body.email

        })
    }

const sendRefreshToken = (res, refreshtoken) => {
    res.cookie("refreshtoken", refreshtoken, {
        httpOnly: true,
        path: '/refresh_token'
    })
}

关键是我需要在react前端中使用类似于Authservice的东西来检查访问令牌是否有效，它应该返回类似的内容。如果访问令牌有效，则为True；如果访问令牌无效，则为false，并基于此，它将允许访问我在react前端中拥有的不同路由。（如果可能，我想将其直接安装到交换机中）

我应该怎么做

我记得在angular中使用了auth guard方法，但由于我还不熟悉如何反应，所以我不确定 我曾经做过这样的事情，canActivate的值是真是假：

    ...
import { RoleGuard } from '../guards/role-guard.service';
...
children:[
   ...,
  {
    path: 'admin',
    component: AdminComponent,
    canActivate: [RoleGuard],
    data: {role: 'Admin'}
  },
  ...
];

因此，我的react中的伪代码应该如下所示：

<BrowserRouter>
<Switch>
    <Route  exact path="/register" render={(props) => <RegisterPage />} />
    <Route exact path="/login" render={(props) => <LoginPage />} />
    <Route exact path="/" render={(props) => <NewLandingPage {...props} />} />
    <Route path="/protectedRoute" canActivate = [Guard] render={(props) => <Prueba {...props} />} /> 
</Switch>
</BrowserRouter>

} />
} />
} />
} /> 

---

但从那件事上看不出来。我应该如何使用前端检查返回的访问令牌是否有效？（我用刷新令牌获得它们）因为它不应该发生在后端吗？因为解码令牌的秘密在后端，我不知道如何在前端检查。

根据您的方法，您可以执行以下操作：

state = {
  isAuthenticated: false,
}

//in render : 

return (
  <div>
    <Router history={history}>
      <Switch>
        <Route exact path="/login" render={(props) => ((this.state.isAuthenticated) ? <Home {...props}/> : <Login {...props}/>)}/>
        <Route exact path="/" render={(props) => ((this.state.isAuthenticated) ? <Home {...props}/> : <Login {...props}/>)}/>
      </Switch>
    </Router>
  </div>
);

状态={
I认证：错误，
}
//在渲染中：
返回(
（（this.state.isAuthenticated）？：）}/>
（（this.state.isAuthenticated）？：）}/>
);