Question

我使用Slim Framework开发后端。但是我找不到比较登录函数生成的令牌的方法：

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类。我得到并存储令牌值，但我不知道如何使用它来检查用户是否登录

Requisition.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 Component）

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{
        [...]
      }
    })
}

由于

Answer 1

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

考虑将JWT存储在localStorage上也是一件好事，以确保用户在应用程序的多个选项卡之间保持登录状态。

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

Answer 2

您可以通过向后端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回复 - ＆gt;未登录

您可以使用回复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');
}

验证令牌JWT是否有效

2 个答案: