Check Auth on routes not working in Vue js

Question

I am adding auth on vue routes but it is not redirecting back to login page.

Giving this error

Error: Navigation cancelled from "/" to "/pages/login" with a new navigation.

Here is how I appliedt it on routes

router.beforeEach((to, from, next) => {

  

    // If auth required, check login. If login fails redirect to login page

    if (!(auth.isAuthenticated())) {

        router.push({ path: '/pages/login', name: 'page-login', component: '@/views/pages/login/Login.vue' })
       

    }

    return next()
       

})

I think it is inside the loop and and redirecting too many times

score 4 · Accepted Answer · answered Nov 02 '20 at 06:21

4

You are right. Your guard is pushing to the login route infinite times because router.beforeEach method is triggered in every route navigation including the login. To avoid this you should differ between the routes that require authentication and those that don't. You can do this by adding meta: {requiresAuth: true,}, on the routes you want to guard. This results in your route to look like:

{
  path: '/',
  component: Home,
  meta: {
    requiresAuth: true,
  },
}

You can then check if the route you're heading to requires authentication by adding: if (to.matched.some((record) => record.meta.requiresAuth)) condition in yourbeforeEach method. This results in your guard looking like:

router.beforeEach((to, from, next) => {
  if (to.matched.some((record) => record.meta.requiresAuth)) {
    if (!(auth.isAuthenticated())) {
      router.push({ path: '/pages/login', name: 'page-login', component: '@/views/pages/login/Login.vue' })
    }
  } else {
    next()
  }
})

This will let you check authentication on required routes only and you can break the infinite loop by adding

meta: {
  requiresAuth: false,
},

on your login route.

answered Nov 02 '20 at 06:21

Abdulaziz Yesuf

582
1
6
15

I need help on one new problem too – Nov 02 '20 at 06:24
Now i am getting this error ```app.js:50316 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/pages/login".``` – Nov 02 '20 at 06:24
Well, this is telling you that you are trying to navigate to the same route you're currently in. This may be occurring because the login route is still guarded. If that is not the reason you might want to check this answer. https://stackoverflow.com/a/58747480/10970649 – Abdulaziz Yesuf Nov 02 '20 at 06:27
I didn't understand can you please give example of my case? – Nov 02 '20 at 06:31
In your guard, you are telling vue to push to `"/pages/login"` route if user is not authenticated. So if you set `requiresAuth` to true on the login route, it will try to push to the `pages/login` route again. – Abdulaziz Yesuf Nov 02 '20 at 06:34
but on login route i have set ```requiresAuth``` false – Nov 02 '20 at 06:38
Does it successfully route you to login when you're not authenticated? – Abdulaziz Yesuf Nov 02 '20 at 06:44
It gives error only when i click on login button after that it works fine – Nov 02 '20 at 06:49
authentication is working perfectly ,, after clicking on login it should move to dashboard but it consider that user is not authenticated and then again move to it – Nov 02 '20 at 06:50
In that case, you should check if the auth property is being set before you push to dashboard, because before going to dashboard the `beforeEach` method gets triggered and if the auth property is not set yet it will reroute you to the login page. – Abdulaziz Yesuf Nov 02 '20 at 07:00
how i can check current route? – Nov 02 '20 at 07:05
try `console.log(auth.isAuthenticated())` in the if condition to check if the auth is set when going to the dashboard route. – Abdulaziz Yesuf Nov 02 '20 at 07:15

Check Auth on routes not working in Vue js

1 Answers1