Laravel vue jwt令牌刷新

Question

我正在使用Tymon提供的jwtAuth包来处理从我的laravel后端到vuespa前端的Auth，我正在创建AuthController，这几乎是我从文档中获取的，只是稍微调整一下它以满足我的需要。从登录到注销以及令牌过期，一切正常。

问题是，我确实看到该控制器上有一个令牌刷新功能，如果我的猜测是正确的，那就是刷新客户端已经拥有的当前令牌。但是怎么做呢？如何处理前端上的刷新令牌？因为它是相当烦人的，每60分钟（默认的令牌寿命），然后它会抛出401。

我想要的是，也许每次用户请求后端时，它都会刷新令牌或增加令牌的生存期。因此，只有当用户空闲整个60分钟时，令牌才会过期。

我们能做到吗？这是最佳实践吗？在整个jwt和令牌方面我都是新手，在过去，我只依赖laravel令牌到期，因为我不使用spa，而是刀片式前端，所以基本上不需要干扰laravel验证用户的方式。

这里添加的信息是我认为与整个身份验证有关的每个文件。

这是我的控制器

<?php

namespace App\Http\Controllers;

use DB;
use Hash;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Validator;
use Illuminate\Support\Facades\Input;
use App\Http\Controllers\Controller;
use App\User;
use Response;

class Authcontroller extends Controller
{
    /**
     * Create a new AuthController instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->middleware('auth:api', ['except' => ['login']]);
    }

    /**
     * Get a JWT via given credentials.
     *
     * @return \Illuminate\Http\JsonResponse
     */
    public function login()
    {
        $credentials = request(['username', 'password']);

        if (! $token = auth('api')->attempt($credentials)) {
            return response()->json(['error' => 'Unauthorized'], 401);
        }

        return $this->respondWithToken($token);
    }

    /**
     * Get the authenticated User.
     *
     * @return \Illuminate\Http\JsonResponse
     */
    public function me()
    {
        return response()->json(auth('api')->user());
    }

    /**
     * Log the user out (Invalidate the token).
     *
     * @return \Illuminate\Http\JsonResponse
     */
    public function logout()
    {
        auth('api')->logout();

        return response()->json(['message' => 'Successfully logged out']);
    }

    /**
     * Refresh a token.
     *
     * @return \Illuminate\Http\JsonResponse
     */
    public function refresh()
    {
        return $this->respondWithToken(auth('api')->refresh());
    }

    /**
     * Get the token array structure.
     *
     * @param  string $token
     *
     * @return \Illuminate\Http\JsonResponse
     */
    protected function respondWithToken($token)
    {
        $id = auth('api')->user()->getId();
        $kelas = User::with('pus','cu')->findOrFail($id);

        return response()->json([
            'access_token' => $token,
            'user' => $kelas,
            'token_type' => 'bearer',
            'expires_in' => auth('api')->factory()->getTTL() * 60
        ]);
    }

    public function guard()
    {
        return Auth::Guard('api');
    }

}

这是我的API路线

Route::group(['prefix' => 'auth'],function($router){
    Route::post('/login', 'AuthController@login');
    Route::post('/logout', 'AuthController@logout');
    Route::post('/refresh', 'AuthController@refresh');
    Route::get('/me', 'AuthController@me');
});

下面是我的vue general.js文件，它处理路由并将头提供给Axios

export function initialize(store, router) {
  router.beforeEach((to, from, next) => {
      const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
      const currentUser = store.state.auth.currentUser;

      if(requiresAuth && !currentUser) {
          next('/login');
      } else if(to.path == '/login' && currentUser) {
          next('/');
      } else {
          next();
      }
  });

  axios.interceptors.response.use(null, (error) => {
      if (error.response.status == 401) {
          store.dispatch('auth/logout');
          router.push('/login');
      }

      return Promise.reject(error);
  });

  if (store.state.auth.currentUser) {
      setAuthorization(store.state.auth.currentUser.token);
  }
}

export function setAuthorization(token) {
  axios.defaults.headers.common["Authorization"] = `Bearer ${token}`
}

下面是处理登录的auth.js

import { setAuthorization } from "./general";

export function login(credentials){
  return new Promise((res,rej) => {
    axios.post('/api/auth/login', credentials)
      .then((response) => {
        setAuthorization(response.data.access_token);
        res(response.data);
      })
      .catch((err) => {
        rej("Username atau password salah");
      })
  })
}

Answer 1

您可以调整令牌过期（从. env作为JWT_TTL）和刷新时间（JWT_REFRESH_TTL）以满足您的需要。并检查令牌是否有效和/或需要在中间件中刷新，以便令牌在需要时尽快刷新。

至于这是否是一种好的做法，请参见Laravel项目的config/JWT.php中对JWT\u REFRESH\u TTL的注释。

对我来说，行之有效的解决方案是使用一个自定义中间件，它扩展了Tymon\JWTAuth\Http\Middleware\BaseMiddleware。样板文件看起来像这样：

Class TryTokenRefresh extends BaseMiddleware
{
    public function handle($request, Closure $next)
    {
        $newToken = $this->tryRefresh($request);
        if ($newToken) {
           // in case there's anything further to be done with the token
           // we want that code to have a valid one
           $request->headers->set('Authorization', 'Bearer ' . $newToken);
        }

        ...
        ...
        $response = $next($request);
        ...
        ...

        if ($newToken) {
            // send new token back to frontend
            $response->headers->set('Authorization', $newToken);
        }

        return $response;
    }

    // Refresh the token
    protected function tryRefresh()
    {
        try {
            $token = $this->auth->parseToken()->refresh();
            return $token;
        } catch (JWTException $e) {
            // token expired? force logout on frontend
            throw new AuthenticationException();
        }

        return null;
    }

在前端，只需在响应中查找授权标题即可：

// check for the `Authorization` header in each response - refresh on frontend if found
axios.interceptors.response.use((response) => {
  let headers = response.headers

  // your 401 check here
  // token refresh - update client session
  if (headers.authorization !== undefined) {
   setAuthorization(headers.authorization);
  }

  return response
})

希望这能有所帮助。