classification

Router Guard: Is an attribute of the Router object, essentially a function. It is called during route switching and can be used to check credentials.

Position defined by time of execution:

1. Guards within components
2. Global guard
3. Route exclusive guard

Execution time

use

Guards within components

A component is not an arbitrary component, but a component at the routing level

const Foo = {
  template: `... `.beforeRouteEnter(to, from, next) {
    // called before the corresponding route to render the component is confirmed
    / / no! Can!!!! Get component instance 'this'
    // Because the component instance has not been created before the guard executes
  },
  beforeRouteUpdate(to, from, next) {
    // Called when the current route changes but the component is being reused
    // For example, for a path /foo/:id with dynamic parameters, when jumping between /foo/1 and /foo/2,
    // Since the same Foo component will be rendered, the component instance will be reused. And the hook will be called in that case.
    // Access component instance 'this'
  },
  beforeRouteLeave(to, from, next) {
    // called when navigating away from the component's corresponding route
    // Access component instance 'this'}}Copy the code

Parameter Description:

• To indicates which route you enter when the current route changes.
• From indicates which route you want to leave when the current route changes.
• Next is a function that you must call next() to finish processing the current action. You can use one of the following three according to your business logic:
  • Next () // Release normal
  • Next (false) // Go back to the original page
  • Next (Routing) enters the specified route
    • next({path: , name:, …. })
    • Next (‘/address)

Route exclusive guard

You can define beforeEnter guards directly on the routing configuration

const router = new VueRouter({
  routes: [{path: '/foo'.component: Foo,
      beforeEnter: (to, from, next) = > {
        // ...}}}])Copy the code

The method arguments are the same as for the global front-guard

Global guard

const router = new VueRouter({ ... })

router.beforeEach(function (to, from, next) {
  console.log('Route changed', to, from, next)
  next()
})

router.afterEach(function (to, from) {
  console.log('Route changed', to, from)
  next()
})
Copy the code

beforeRouteLeave (to, from, next) {
  if (this.msg && window.confirm('Sure to jump')) {
    next()
  } else {
    next(false)}},Copy the code

Application scenarios of route guard

A prompt window is displayed when you leave the page

beforeRouteLeave (to, from, next) {
  if (this.msg && window.confirm('Sure to jump')) {
    next()
  } else {
    next(false)}},Copy the code

Dynamic route jump

article/1234 –> article/2345

For example: article details page

beforeRouteUpdate(to, from, next) {
    // Called when the current route changes but the component is being reused
    // For example, for a path /foo/:id with dynamic parameters, when jumping between /foo/1 and /foo/2,
    // Since the same Foo component will be rendered, the component instance will be reused. And the hook will be called in that case.
    // Access component instance 'this'
    next()
    this.load details ()}Copy the code

Use the global guard for permission verification

The user is not logged in, he still wants to access the personal center page, tell him to log back in

operation

Add a front-facing route guard to router/index.js. There are two pieces of business logic:

1. Some sensitive pages cannot be accessed without logging in
2. If logged in, you can no longer access the login page

import store from '@/store/index.js'
const vipList = ['/setting']
router.beforeEach((to, from, next) = > {
  const token = store.state.tokenInfo.token
  console.log(token)
  if(! token && vipList.includes(to.path)) {console.log('No permission, cannot access VIP pages')
    next('/login) } else if (token && to.path === '/login') { console.log('If you have logged in, you cannot access login') next('/') } else { next() } }) export default routerCopy the code

Pay attention to

• Get token action should be done on every hop (code in beforeEach)
• Write the pages that require permissions in an array so that we can use the includes method to determine