【问题标题】:Verify if Token JWT is valid验证 Token JWT 是否有效
【发布时间】:2018-11-18 21:25:22
【问题描述】:

我正在使用 Slim 框架来开发后端。但是我找不到比较登录功能生成的令牌的方法:

public function login($request, $response){
    $key = $this->container['key'];
    $email = $request->getParsedBody()['email'];
    $senha = $this->salt . $request->getParsedBody()['senha'];

    $usuario = $this->em->getRepository(UsuarioEntity::class)->findOneBy(['email' => $email]);

    if(empty($usuario) || !password_verify($senha, $usuario->getSenha())) {
      return $response->withJson('Usuario sem permissão de acesso', 401);
    }

    $token = array(
      "session" => password_hash($usuario->getId() . 'f*u87', PASSWORD_BCRYPT),
      "id" => $usuario->getId(),
      "iat" => time(),
      "exp" => time() + (60 * 10)
    );

    $jwt = \Firebase\JWT\JWT::encode($token, $key);
    return $response->withJson($jwt, 200);
}

在前端(React)我调用一个处理所有请求的 JS 类。我获取并存储了令牌值,但我不知道如何使用它来检查用户是否已登录

申请.js

axiosPost(funcao,dados){
    //A AUTENTICAÇÃO VAI AQUI
    return axios.post(config.urlBase + funcao, dados);
}

setToken(token){
    this.token = token;
}

getToken(){
    return this.token;
}

LoginEmpresa.js(React 组件)

login(){
    var reqAxios = new Requisicoes();
    reqAxios.axiosPost('login',{ email: this.state.email, senha: this.state.senha }).then(res => {
      if(res.data){
        reqAxios.setToken(res.data);
      }else{
        [...]
      }
    })
}

谢谢

【问题讨论】:

    标签: javascript php reactjs jwt slim


    【解决方案1】:

    您可以通过向后端 API 发出请求来检查 JWT 是否有效。

    public function getUser($request, $response){
        $user = // GET CURRENT LOGGED IN USER BASED ON THE JWT
    
        if(!$user) {
          return $response->withJson('user is not logged in', 401);
        }
    
        return $response->withJson($user, 200);
    }
    

    在 React 部分,您可以向 API 发出请求以获取当前登录的用户。

    • 如果您收到带有用户的200 响应 -> 已登录
    • 如果您收到401 响应 -> 未登录

    您可以使用回复interceptor from Axios 来查看状态码:

    axios.interceptors.response.use(function (response) {
        // Do something with response data
        return response;
      }, function (error) {
        // Do something with response error
        if (error.status === 401) {
          // DELETE YOUR TOKEN 
          this.removeToken();
        }
        return Promise.reject(error);
    });
    

    另外,我建议您将令牌存储在 localStorage 中,以便用户的会话不会在页面刷新时过期。

    setToken(token){
        localStorage.setItem('jwt_token', token);
    }
    
    getToken(){
        return localStorage.getItem('jwt_token');
    }
    
    removeToken(){
        localStorage.removeItem('jwt_token');
    }
    

    【讨论】:

    • 如何使用 axios 拦截器?我把这段代码放在哪里(我必须创建一个类或类似的东西?
    • 您可以在 Requisition.js 中添加 axios 拦截器。或者,如果您不想使用拦截器,只需在每个请求中添加此逻辑(但如果您要添加大量 API 请求,这将添加大量重复代码)。
    【解决方案2】:

    由于您的前端是一个 React 应用程序,因此在登录响应中,您应该将令牌存储在应用程序的状态中。你可以将它放在应用的主要组件上、redux 商店或其他任何地方。

    考虑将 JWT 存储在 localStorage 上也很好,以确保用户在您的应用程序的多个选项卡之间保持登录。

    如果您使用的是 JWT 协议,您应该配置您的 axios 实例以发送带有令牌的 Authorization HTTP 标头。我没有在你提供的代码中看到它

    【讨论】:

    • 我真正想要的是我需要用来验证的功能以及如何使用它。
    猜你喜欢
    • 2019-02-17
    • 1970-01-01
    • 2017-04-03
    • 2015-02-13
    • 2020-12-15
    • 2022-09-27
    • 2019-03-30
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多