Middleware for routes in vue

Admin 1
Viewed 2426

I want to deny some routes for authorized users, like login page, register page, but I don't know how to make those middlewares

Routes

routes: [
{
  path: '/login',
  name: 'Login',
  component: Login
},
{
  path: '/register',
  name: 'Register',
  component: Register
}
]

Function that I use in components

computed: {
  isLoggedIn () {
    return this.$store.getters.isLoggedIn
  }
}
vue.js express routes authorization
2 Answers

In your router you can do something like this.

All routes marked with meta: { requiresLogin: true} } will be checked in the BeforeEach method. Here we redirect them to the login page.

You can in principle halt the router and show a modal or whatever you like here.

Router

import Vue from 'vue'
import VueRouter from 'vue-router'

import App from '../views/App.vue'
import Login from '../views/login.vue'
import Register from '../views/registser.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    { path: '/', name: 'app', component: App, meta: { requiresLogin: true} },
    { path: '/login', name: 'login', component: Login },
    { path: '/register', name: 'register', component: Register },
  ]
})

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresLogin)) {
    if (**USER IS NOT LOGGED IN**) {
      next({
        path: '/login',
        query: {
          redirect: to.fullPath,
        },
      });
    } else {
      next();
    }
  } else {
    next();
  }
})

export default router
user_11736750

Create additional meta field requiresAuth in your routes to specify which route require logged user:

routes: [{
      path: '/',
      name: 'Dashboard',
      component: Dashboard,
      children: [{
        path: 'settings',
        name: 'Settings',
        component: Settings,
        meta: {
          requiresAuth: true
        }
      }],
      meta: {
        requiresAuth: true
      }
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    }
  ],

Then add middleware in main.js:

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth) {
    const authUser = JSON.parse(window.localStorage.getItem('authUser')) // your oauth key
    if (authUser && authUser.access_token) {
      next()
    } else {
      next({
        name: 'Login'
      })
    }
  }
  next()
})

new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: {
    App
  }
})
user_36046460
Related