Question

我正在尝试使用基于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来绕过此检查，如何保护我的前端路由。

Answer 1

嗯，看起来你没有正确使用JWT，当你在服务器端签署你的jwt时，客户端会收到一个加密的令牌，可以在你的客户端进行部分解码，但是每个login \ refresh \ etc都应该在服务器端验证令牌，你可以在那里完全解码令牌，如果令牌不是真正的令牌\过期，服务器应该响应错误，任何带有此令牌的请求都不应该继续。

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

jwt.io - 官方网站

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

反应前端的基于令牌的认证

1 个答案: