Vue project to set global navigation routing guard

Vue project in China, we usually set up a route navigation guard, visit the Web site the user is not logged in in order to prevent other pages directly from the address bar enter the address. Wherein the route navigation method using the guard provided Vue-router implemented.

https://router.vuejs.org/zh/guide/advanced/navigation-guards.html

1. Import VUE routes in the routing objects js file and mount

 

import Router from 'vue-router'
Vue.use(Router)

 

2. Create a routing instance

 

const router = new Router({
  routes: [
    { path: '/', redirect: '/login' },
    { path: '/login', component: Login },
    { path: '/home', component: Home}
  ]
})

 

3. Mount guard the route navigation

// route navigation mount guard 
router.beforeEach ((to, from, the Next) => { 
  // path to be accessed 
  // from representatives of the path from which to jump from 
  // next is a function that represents the release 
  // next () release next ( '/ login') forced jump 

  IF (to.path === '/ Login') return next () 
  // Get token 
  const = tokenStr window.sessionStorage.getItem ( 'token') 
  IF ( ! tokenStr) Next return ( '/ Login') 
  Next () 
})