Conozca la guardia de enrutamiento en vue en 5 minutos

Conozca la guardia de enrutamiento en vue en 5 minutos

En el desarrollo del proyecto, cada vez que se cambia la ruta o se actualiza la página, es necesario juzgar si el usuario ha iniciado sesión. El front-end puede juzgar, y el back-end también juzga. Nuestro front-end también debe juzgar.

Vue-router proporciona ganchos de navegación: el gancho de navegación frontal global beforeEach y el gancho de navegación trasero global afterEach, se activarán antes y después de que la ruta esté a punto de cambiar. Por lo tanto, juzgar si el usuario ha iniciado sesión debe evaluarse en el enlace de navegación beforeEach.

El gancho de navegación tiene 3 parámetros:
1. a: el objeto de ruta de destino que está a punto de ingresar;
2. desde: el objeto de ruta que la navegación actual está a punto de salir;
3. siguiente: la función de siguiente gancho (afterEach) se puede ingresar después de llamar a este método .
  next () //   Ir directamente a la ruta señalada por to
  next (falso) // Interrumpir la ruta actual
next ('ruta') // Saltar a la ruta especificada
  next ('error') // Saltar a la ruta incorrecta antes

Cada:
Archivo de configuración de ruta:

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import HomePage from '@/pages/home.vue'
Vue.use(Router)
const router=new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
     {
      path: '/home',
      name: 'home',
      component: HomePage
    },
     {
        path:'*',
        redirect:'/home'
     }
  ],
})
  router.beforeEach((to,from,next)=>{
    console.log(to);
    console.log(from);
    next();
  })
 export default router;

El resultado de la impresión es el siguiente:


el código para lograr la autenticación del usuario:

router.beforeEach((to, from, next) => {
    //我在这里模仿了一个获取用户信息的方法
  let isLogin = window.sessionStorage.getItem('userInfo');
    if (isLogin) {
        //如果用户信息存在则往下执行。
        next()
    } else {
        //如果用户token不存在则跳转到login页面
        if (to.path === '/login') {
            next()
        } else {
            next('/login')
        }
    }
})

afterEach: La

diferencia con beforeEach es que afterEach no recibe el tercer parámetro next function, ni cambia la navegación en sí. Generalmente, beforeEach se usa más, afterEach se usa menos.

router.afterEach((to,from)=>{ //这里不接收next
    console.log(to);
    console.log(from);
})

¡Es el final! Mira a los demás

 Línea de lienzo Animación
 CSS Cubo de Rubik giratorio
 JS Mini teclado
 CSS Elefante realista