Restricting access to routes if the user is not logged in Vuejs

Asked

Viewed 152 times

-1

I am unable to block routes are going through normal without authentication

I am developing a web application and I have a question about how to prohibit access to routes if they are not logged in, with this, I thought of some solutions that would use localStorage,until then everything worked ok, I log in save token use token to access the data of api.

I am only having difficulties in locking the vuejs routes using the Vue-router I did already tried several ways and none prevented to access application without having logged in.

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

  if (!to.matched.some(record => record.meta.requiresAuth)) {
    if (store.isLoggedIn) {
      console.log(to)
      console.log(store.isLoggedIn)
      next()
      return
    }
    next('/login')

  } else {
    next()
  }

})

> export default [
> 
>   {
>     path: '/',
>     // Relative to /src/views
>     name: 'home',
>     view: 'Dashboard',
>     meta: {
>       requiresAuth: true
>     }
>     },   {
>     path: '/cliente-index',
>     name: 'Clientes',
>     view: 'Clientes',
>     meta: {
>       requiresAuth: true
>     }   },   {
>     path: '/sistema-index',
>     name: 'Sistemas',
>     view: 'Sistemas',
>     meta: {
>       requiresAuth: true
>     }   },   {
>     path: '/sistema-pastas/:id:descricao:path_padrao',
>     name: 'sistema-pastas',
>     view: 'Pastas',
>     meta: {
>       requiresAuth: true
>     }   },   {
>     path: '/versao-index',
>     name: 'Versões',
>     view: 'Versao',
>     meta: {
>       requiresAuth: true
>     }   },   {
>     path: '/usuario-index',
>     name: 'Usuarios',
>     view: 'Usuarios',
>     meta: {
>       requiresAuth: true
>     }   },   {
>     path: '/login',
>     name: '',
>     view: 'Login',   },   {
>     path: '/cliente-sistema/:id',
>     name: 'Cliente Sistema',
>     view: 'ClienteSistema',
>     meta: {
>       requiresAuth: true
>     }
laravel api vue.js xampp

  • You need to use the Router-Guard to know if the user is logged in if a route parameter is inside the "loged" Rage, that is, put a "loged" parameter on all "protected" wheels and check if the accessed wheel is a "protected" route and if it is, search for the "token" and if it does not exist, push to "login"

1 answer

0

use the "Guard" of the "router" to take the user from a "protected" route out of it if the "token" does not exist.

router.beforeEach((to, from, next) => {
  if (findToken(to.meta.requiresAuth)) next()

  next('/login')
})

Use the "findToken" function to fetch the user token and if it returns true it will ignore and continue however if it does not find "false" it will send the user to the "path" "/login"

Browser other questions tagged laravel api vue.js xampp

You are not signed in. Login or sign up in order to post.