用于反应前端的基于令牌的身份验证

Posted 2023-03-10

【中文标题】用于反应前端的基于令牌的身份验证

【英文标题】：Token based authentication for react front end

【发布时间】：2018-10-07 13:24:39

【问题描述】：

我正在尝试使用基于 JWT 的身份验证，如果我将令牌保存在 cookie 中，如下所示，我不确定如何保护路由

import Cookies from 'universal-cookie';

const cookies = new Cookies();

const authService = 
  isAuthenticated () 
    if (cookies.get('auth')) 
      return true;
    
    return false;
  ,
  signIn (data, cb) 
    cookies.set('auth', true,  path: '/' );
    setTimeout(cb, 100);
  ,
  signOut (cb) 
    cookies.remove('auth');
    setTimeout(cb, 100);
  
;

export default authService;

它将检查 auth cookie 并允许用户路由。我如何使路由受到保护并在每次令牌有效或无效时进行验证，而不仅仅是检查令牌是否存在。

const PrivateRoute = ( component: Component, ...rest ) => (
  <Route
    ...rest
    render=props => (
      authService.isAuthenticated()
        ? <Component ...props />
        : <Redirect to=
          
            pathname: '/',
            state:  target: props.location 
          
        />
    )
  />
);

可以通过使用浏览器开发工具手动将对象添加到 cookie 来绕过此检查，我如何保护我的前端路由。

【问题讨论】：

我之前回答过一个与此类似的问题：***.com/questions/42840726/… - TL;DR 是，在 SPA/前端应用程序中，数据是私有的，而不是路由。

我想保护路线视图和数据。有什么办法吗？

【参考方案1】：

嗯，您似乎没有正确使用 JWT， 当您在服务器端签署 jwt 时，客户端会收到一个加密令牌，该令牌可以在您的客户端进行部分解码，但每次登录 \ 刷新 \ 等令牌都应在您的服务器端进行验证，您可以在其中完全解码令牌, 如果令牌不是真正的令牌 \ expired 服务器应该响应一个错误，并且任何带有这个令牌的请求都不应该继续。

我强烈建议您阅读有关 jwt 的更多信息，您可以查看：

jwt.io - 官方网站

jwt-express - 用于服务器端验证令牌的 npm 包

【讨论】：

Tom Mendelson，我在服务器端做 jwt.verify，cookie 中的令牌是由服务器生成的。服务端路由受 JWT 中间件保护，我要前端路由保护。

客户端保护应该实现什么？如果您尝试仅保护数据，则服务器端验证就足够了，因为当用户进入页面并尝试加载数据时，服务器会因为伪造令牌而拒绝请求。如果您想自己保护路由（我不知道为什么），那么您可以使用 webpack split chunks 选项（webpack.js.org/guides/code-splitting），您可以在服务器验证后动态要求页面 \ 路由等