Vuejs Router guard works unexpected
up vote
0
down vote
favorite
I have router which work with errors and can't understand how to fix it.
This global router which should check jwt token expiration and handle routing. Everything worked fine before adding some functionality like isActivated
account. So now I need to check if User has token and if User account is activated.
1) If user has token it should make next() otherwise next("/login") (redirect)
2) If user has token but his account is not activated yet (first time login), it should redirect on Setup page next("/setup") until he submits some information.
So this is my guard
router.beforeEach((to, from, next) =>
const token = localStorage.getItem("token");
const tokenExp = parseInt(localStorage.getItem("tokenExp"))
const isActivated = localStorage.getItem("isActivated")
const now = new Date().getTime() + 129600000
const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
console.log("first")
if (requiresAuth && !token)
next('/login');
else if (requiresAuth && token)
if (now > tokenExp)
axios.post("/user/t/r", token)
.then(e =>
const token = e.headers['authorization'].replace("Bearer ", "");
localStorage.setItem("token", token);
localStorage.setItem("tokenExp", (new Date().getTime() + 172800000).toString())
if (isActivated === 'true')
next()
else
next("/setup")
)
.catch(e =>
localStorage.removeItem("token")
localStorage.removeItem("tokenExp")
localStorage.removeItem("fullName")
localStorage.removeItem("role")
next('/login')
)
else
console.log("second")
if (isActivated === 'true')
console.log("third")
next();
else
console.log("fourth")
next("/setup")
else
next();
)
And this is my console.log with error when I login:
vue.js vuejs2 vue-router
add a comment |
up vote
0
down vote
favorite
I have router which work with errors and can't understand how to fix it.
This global router which should check jwt token expiration and handle routing. Everything worked fine before adding some functionality like isActivated
account. So now I need to check if User has token and if User account is activated.
1) If user has token it should make next() otherwise next("/login") (redirect)
2) If user has token but his account is not activated yet (first time login), it should redirect on Setup page next("/setup") until he submits some information.
So this is my guard
router.beforeEach((to, from, next) =>
const token = localStorage.getItem("token");
const tokenExp = parseInt(localStorage.getItem("tokenExp"))
const isActivated = localStorage.getItem("isActivated")
const now = new Date().getTime() + 129600000
const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
console.log("first")
if (requiresAuth && !token)
next('/login');
else if (requiresAuth && token)
if (now > tokenExp)
axios.post("/user/t/r", token)
.then(e =>
const token = e.headers['authorization'].replace("Bearer ", "");
localStorage.setItem("token", token);
localStorage.setItem("tokenExp", (new Date().getTime() + 172800000).toString())
if (isActivated === 'true')
next()
else
next("/setup")
)
.catch(e =>
localStorage.removeItem("token")
localStorage.removeItem("tokenExp")
localStorage.removeItem("fullName")
localStorage.removeItem("role")
next('/login')
)
else
console.log("second")
if (isActivated === 'true')
console.log("third")
next();
else
console.log("fourth")
next("/setup")
else
next();
)
And this is my console.log with error when I login:
vue.js vuejs2 vue-router
2
Yes, the reason behind this is router.beforeEach runs whenever you redirect to any route. And in the else condition where you are redirecting to a step /setup, the above beforeEach runs again and hence the never ending loop
– Mohit Tilwani
yesterday
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I have router which work with errors and can't understand how to fix it.
This global router which should check jwt token expiration and handle routing. Everything worked fine before adding some functionality like isActivated
account. So now I need to check if User has token and if User account is activated.
1) If user has token it should make next() otherwise next("/login") (redirect)
2) If user has token but his account is not activated yet (first time login), it should redirect on Setup page next("/setup") until he submits some information.
So this is my guard
router.beforeEach((to, from, next) =>
const token = localStorage.getItem("token");
const tokenExp = parseInt(localStorage.getItem("tokenExp"))
const isActivated = localStorage.getItem("isActivated")
const now = new Date().getTime() + 129600000
const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
console.log("first")
if (requiresAuth && !token)
next('/login');
else if (requiresAuth && token)
if (now > tokenExp)
axios.post("/user/t/r", token)
.then(e =>
const token = e.headers['authorization'].replace("Bearer ", "");
localStorage.setItem("token", token);
localStorage.setItem("tokenExp", (new Date().getTime() + 172800000).toString())
if (isActivated === 'true')
next()
else
next("/setup")
)
.catch(e =>
localStorage.removeItem("token")
localStorage.removeItem("tokenExp")
localStorage.removeItem("fullName")
localStorage.removeItem("role")
next('/login')
)
else
console.log("second")
if (isActivated === 'true')
console.log("third")
next();
else
console.log("fourth")
next("/setup")
else
next();
)
And this is my console.log with error when I login:
vue.js vuejs2 vue-router
I have router which work with errors and can't understand how to fix it.
This global router which should check jwt token expiration and handle routing. Everything worked fine before adding some functionality like isActivated
account. So now I need to check if User has token and if User account is activated.
1) If user has token it should make next() otherwise next("/login") (redirect)
2) If user has token but his account is not activated yet (first time login), it should redirect on Setup page next("/setup") until he submits some information.
So this is my guard
router.beforeEach((to, from, next) =>
const token = localStorage.getItem("token");
const tokenExp = parseInt(localStorage.getItem("tokenExp"))
const isActivated = localStorage.getItem("isActivated")
const now = new Date().getTime() + 129600000
const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
console.log("first")
if (requiresAuth && !token)
next('/login');
else if (requiresAuth && token)
if (now > tokenExp)
axios.post("/user/t/r", token)
.then(e =>
const token = e.headers['authorization'].replace("Bearer ", "");
localStorage.setItem("token", token);
localStorage.setItem("tokenExp", (new Date().getTime() + 172800000).toString())
if (isActivated === 'true')
next()
else
next("/setup")
)
.catch(e =>
localStorage.removeItem("token")
localStorage.removeItem("tokenExp")
localStorage.removeItem("fullName")
localStorage.removeItem("role")
next('/login')
)
else
console.log("second")
if (isActivated === 'true')
console.log("third")
next();
else
console.log("fourth")
next("/setup")
else
next();
)
And this is my console.log with error when I login:
vue.js vuejs2 vue-router
vue.js vuejs2 vue-router
asked yesterday
Dave
97110
97110
2
Yes, the reason behind this is router.beforeEach runs whenever you redirect to any route. And in the else condition where you are redirecting to a step /setup, the above beforeEach runs again and hence the never ending loop
– Mohit Tilwani
yesterday
add a comment |
2
Yes, the reason behind this is router.beforeEach runs whenever you redirect to any route. And in the else condition where you are redirecting to a step /setup, the above beforeEach runs again and hence the never ending loop
– Mohit Tilwani
yesterday
2
2
Yes, the reason behind this is router.beforeEach runs whenever you redirect to any route. And in the else condition where you are redirecting to a step /setup, the above beforeEach runs again and hence the never ending loop
– Mohit Tilwani
yesterday
Yes, the reason behind this is router.beforeEach runs whenever you redirect to any route. And in the else condition where you are redirecting to a step /setup, the above beforeEach runs again and hence the never ending loop
– Mohit Tilwani
yesterday
add a comment |
1 Answer
1
active
oldest
votes
up vote
1
down vote
accepted
You are infinitely redirecting to /setup, You code on first run hits "fourth" then sends the user to /setup where that before call is run again and your infinite loop starts.
You need to stop calling next('/setup') or next('/login') if the user is already on that page.
You need to make use of router.currentRoute in order to check you are not going to redirect to page they are already on.
https://router.vuejs.org/api/#router-currentroute
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
accepted
You are infinitely redirecting to /setup, You code on first run hits "fourth" then sends the user to /setup where that before call is run again and your infinite loop starts.
You need to stop calling next('/setup') or next('/login') if the user is already on that page.
You need to make use of router.currentRoute in order to check you are not going to redirect to page they are already on.
https://router.vuejs.org/api/#router-currentroute
add a comment |
up vote
1
down vote
accepted
You are infinitely redirecting to /setup, You code on first run hits "fourth" then sends the user to /setup where that before call is run again and your infinite loop starts.
You need to stop calling next('/setup') or next('/login') if the user is already on that page.
You need to make use of router.currentRoute in order to check you are not going to redirect to page they are already on.
https://router.vuejs.org/api/#router-currentroute
add a comment |
up vote
1
down vote
accepted
up vote
1
down vote
accepted
You are infinitely redirecting to /setup, You code on first run hits "fourth" then sends the user to /setup where that before call is run again and your infinite loop starts.
You need to stop calling next('/setup') or next('/login') if the user is already on that page.
You need to make use of router.currentRoute in order to check you are not going to redirect to page they are already on.
https://router.vuejs.org/api/#router-currentroute
You are infinitely redirecting to /setup, You code on first run hits "fourth" then sends the user to /setup where that before call is run again and your infinite loop starts.
You need to stop calling next('/setup') or next('/login') if the user is already on that page.
You need to make use of router.currentRoute in order to check you are not going to redirect to page they are already on.
https://router.vuejs.org/api/#router-currentroute
answered yesterday
Marc Newton
1,5251317
1,5251317
add a comment |
add a comment |
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53237823%2fvuejs-router-guard-works-unexpected%23new-answer', 'question_page');
);
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
2
Yes, the reason behind this is router.beforeEach runs whenever you redirect to any route. And in the else condition where you are redirecting to a step /setup, the above beforeEach runs again and hence the never ending loop
– Mohit Tilwani
yesterday