axios 自动刷新 JWT Token

本文转载自https://tiicle.com/items/141/automatically-refresh-jwt-axios-token

1、定义刷新 token 的路由

$api = app('Dingo\Api\Routing\Router');
$api->version('v1', function($api){
    $api->post('token', 'App\Http\Controllers\AuthController@token');
});

2、刷新 token 的处理代码

class AuthController extends Controller
{
    public function token()
    {
        $token = JWTAuth::getToken();
        if (!$token) {
            throw new BadRequestHtttpException('Token not provided');
        }
        try {
            $token = JWTAuth::refresh($token);
        } catch (TokenInvalidException $e) {
            throw new AccessDeniedHttpException('The token is invalid');
        }
        return $this->response->withArray(['token' => $token]);
    }
}

3、在 Axios 中处理 401 错误，自动刷新 Token

axios.interceptors.response.use(function(response) {
  return response
}, function(error) {
  const originalRequest = error.config

  if (error.response.status === 401 && !originalRequest._retry) {
    originalRequest._retry = true

    const token = window.localStorage.getItem('token')
    return axios.post('/v1/token', { token })
      .then(({ data }) => {
        window.localStorage.setItem('token', data.token)
        axios.defaults.headers.common.Authorization = 'Bearer ' + data.token
        // retry request
        originalRequest.headers.Authorization = 'Bearer ' + data.token
        return axios(originalRequest)
      })
  }
  return Promise.reject(error)
})