axios 拦截器返回错误 res 后未定义

问题描述

您好，我正在制作一个使用 jwt 令牌进行身份验证的 Reactjs 应用程序（带有 Laravel 后端）。我想在令牌过期或无效时刷新 jwt 令牌（401 响应）。但是当它通过错误拦截器时，show 函数中的响应是未定义的。

(axios 请求函数)

    show() {
        axios.get("/api/company/show/" + this.props.user.company_id)
        .then(res => {
            console.log(res)
            const company = res.data
            this.setState({
                company
            })
        }).catch(err => {
            console.log(err)
        })
    }

（拦截器响应）

axios.interceptors.response.use(
  (response) => {
      console.log(response)
    return response
  },...

如果令牌有效，则请求返回正常响应并且可以正常工作，

但是当 Laravel 返回 401 错误时它不起作用。

(laravel)

    public function handle($request,Closure $next)
    {
        try {
            $user = JWTAuth::parsetoken()->authenticate();
        } catch (Exception $e) {
            if ($e instanceof \Tymon\JWTAuth\Exceptions\TokenInvalidException) {
                return response()->json(['error' => 'Token is Invalid.'],401);
            } else if ($e instanceof \Tymon\JWTAuth\Exceptions\TokenExpiredException) {
                return response()->json(['error' => 'Token has Expired.'],401);

            } else {
                return response()->json(['error' => 'Authorization Token not found.'],401);
            }
        }
        return $next($request);
    }

（拦截器错误）

...
  (error) => {
      console.log('error')
    return new Promise((resolve) => {
      const originalRequest = error.config
      console.log(originalRequest.headers.Authorization)
      const refreshToken = localStorage.getItem('token')
      if (error.response && (error.response.status === 401 || error.response.status===500) && error.config && !error.config.__isRetryRequest && refreshToken) {
        originalRequest._retry = true

        const response = fetch(process.env.REACT_APP_PUBLIC_PATH+'api/auth/refresh',{
          method: 'POST',headers: {
            'Content-Type': 'application/json','Authorization': `Bearer ${refreshToken}`
          },body: JSON.stringify({
            refresh: refreshToken,}),})
          .then((res) => res.json())
          .then(res=>{
            console.log(res.token)
            localStorage.setItem("token",res.token)
            axios.defaults.headers.common["Authorization"] = `Bearer ${res.token}`
            originalRequest.headers.Authorization = `Bearer ${res.token}`
            return axios(originalRequest)
            })
        resolve(response)
      }

      return Promise.reject(error)
    }).then(()=>console.log('done refreshing'));
  },)

拦截器错误将请求一个新的令牌。然后将使用新令牌再次请求原始调用。新的请求响应在拦截器中可见 (response) => {...} 但在 show() 函数中不可见

第一行是拦截器中的console.log（响应）第三行是 show() 函数中的 console.log 错误是它在 show() 函数中找不到 'data' const company = res.data

所以问题是，如果我收到 401 错误，请求在 show() 函数（和其他函数）中是未定义的

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

axios interceptor javascript reactjs reactjs