您好,我正在制作一个使用 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() 函数(和其他函数)中是未定义的