时间戳

首页 > 解决方案 > 处理访问令牌并对安全路由做出反应的正确方法是什么？

reactjs - 处理访问令牌并对安全路由做出反应的正确方法是什么？

问题描述

我有一个快速后端，它在登录时返回一个访问令牌作为响应，并返回一个刷新令牌作为 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'
    })
}

关键是我需要在我的反应前端有类似于 Authservice 的东西来检查该访问令牌是否有效，它应该返回类似的东西。如果访问令牌有效，则为真，如果访问令牌无效，则为假，基于此，它将允许访问我在反应前端中拥有的不同路由。（如果可能的话，我想将它直接实施到交换机中）

我应该如何处理它？

我记得在 Angular 中使用了身份验证保护方法，但是由于我是新手，因此我不确定我曾经做过这样的事情，其中​​ canActivate 具有真值或假值：

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

所以作为我反应中的伪代码，它应该如下所示：

<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>

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

标签： reactjsreact-router

解决方案

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

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>
);

推荐阅读