react-laravel redirect issue from middleware - php

Question

I don’t used react-router, just simply used react with blade. Like
following:
articleManage.blade.php
#extends('layout')
#section('content')
<div id="articleManage"></div>
#stop
I try to use jwt authentication, and it works.
Here is my jwt auth middleware:
authJWT.php
try {
$token = JWTAuth::parseToken();
if (! $token->authenticate()) {
return response()->json(['user_not_found'], 404);
}
} catch (Exception $e) {
if ($e instanceof \Tymon\JWTAuth\Exceptions\TokenInvalidException){
return response()->json(['error'=>'Token is Invalid 1']);
}else if ($e instanceof \Tymon\JWTAuth\Exceptions\TokenExpiredException){
return response()->json(['error'=>'Token is Expired 2']);
}else{
return response()->json(['error'=>'Something is wrong 3']);
}
}
return $next($request);
Now I am stuck with redirection on middleware, cause it won’t work when I change it like this:
try {
$token = JWTAuth::parseToken();
if (! $token->authenticate()) {
return response()->json(['user_not_found'], 404);
}
} catch (Exception $e) {
……
return redirect('/');
}
return $next($request);
And this is the error message I got:
TypeError: Cannot read property 'map' of undefined
at ArticleManage.render (app.js:54105)
at app.js:50033
at measureLifeCyclePerf (app.js:49313)
at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (app.js:50032)
at ReactCompositeComponentWrapper._renderValidatedComponent (app.js:50059)
at ReactCompositeComponentWrapper._updateRenderedComponent (app.js:49983)
at ReactCompositeComponentWrapper._performComponentUpdate (app.js:49961)
at ReactCompositeComponentWrapper.updateComponent (app.js:49882)
at ReactCompositeComponentWrapper.performUpdateIfNecessary (app.js:49798)
at Object.performUpdateIfNecessary (app.js:2916)
Any idea how to redirect when token error?
10/17: this is my program flow
articleManage.js
let url = 'load-article';
let config = {
headers: {'Authorization': 'Bearer '+localStorage.getItem('token')}
};
axios.get(url,config).then(response=>{
this.setState({'articles':response.data.articles});
}).catch(function (error) {
console.log(error);
});
web.php
Route::get('/load-article', 'API\ArticleController#read')->middleware('jwt-auth');
ArticleController#read
public function read(Request $request){
$header = $request->header('Authorization');
$articles = Article::All();
return response()->json(['articles' => $articles]);
}
now I change middleware, cause I want to try redirection, then I get error.
public function handle($request, Closure $next)
{
// try {
// $token = JWTAuth::parseToken();
// if (! $token->authenticate()) {
// return response()->json(['user_not_found'], 404);
// }
// } catch (Exception $e) {
// if ($e instanceof \Tymon\JWTAuth\Exceptions\TokenInvalidException){
// return response()->json(['error'=>'Token is Invalid 1']);
// }else if ($e instanceof \Tymon\JWTAuth\Exceptions\TokenExpiredException){
// return response()->json(['error'=>'Token is Expired 2']);
// }else{
// return response()->json(['error'=>'Something is wrong 3']);
// }
// }
// return $next($request);
return redirect('/');
}

Answer 1

Shot in the dark here, since you didn't post the whole articleManager component. But, make sure you're passing some sort of failure status code header on all error responses. Otherwise, Axios will read response()->json(['error'=>'Token is Invalid 1']) as a success and attempt to set state. Since response.data.articles is undefined, that's why you're getting the error. So change your middleware in authJWT.php to something like:
} catch (Exception $e) {
if ($e instanceof \Tymon\JWTAuth\Exceptions\TokenInvalidException) {
return response()->json(['error'=>'Token is Invalid 1'], 500);
} else if ($e instanceof \Tymon\JWTAuth\Exceptions\TokenExpiredException) {
return response()->json(['error'=>'Token is Expired 2'], 500);
} else {
return response()->json(['error'=>'Something is wrong 3'], 500);
}
}