Vue+JavaScript establece protección de enrutamiento

En el proceso de desarrollo de software, cuando no queremos que los usuarios puedan ingresar a la página de inicio del sitio web sin iniciar sesión, generalmente usamos protectores de enrutamiento para lograrlo.

1. ¿Qué es la guardia de ruta?

Podemos entender simplemente al guardia de ruta como el guardia de seguridad de una casa, si deseas entrar a la casa primero debes pasar la inspección del guardia de seguridad (guardia de ruta) y cumplir con los requisitos antes de poder entrar a la casa. Tienes que decirle a la seguridad, ¿de dónde eres? ¿Adónde vas? Entonces la seguridad te dice qué hacer a continuación. Si usted es el propietario de esta casa, puede ingresar; de lo contrario, debe llamar al propietario y discutir con el propietario (inicio de sesión y registro), y solo puede iniciar sesión después de darle permiso.

2. Tipos de protectores de enrutamiento

Protección de enrutamiento global (protección previa al enrutamiento global, protección posterior al enrutamiento global), protección de enrutamiento intracomponente y protección de enrutamiento exclusiva.

Protección previa al enrutamiento global : llamada durante la inicialización y antes de cada cambio de enrutamiento.

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

a: a qué ruta ingresar, desde: de qué ruta partir, siguiente: función, decida si mostrar la página de la ruta que desea ver.

Protección posterior al enrutamiento global : llamada durante la inicialización y después de cada cambio de enrutamiento.

router.afterEach((to, from)=>{
})

En comparación con la protección previa al enrutamiento, la protección posterior al enrutamiento no tiene next(). Debido a que la página ha sido cambiada, entonces no hay necesidad de continuar. Los otros dos cumplen el mismo propósito que la guardia previa a la ruta.

En resumen : antes del cambio, se usa el protector de enrutamiento delantero, y después del cambio, se usa el protector de enrutamiento trasero.

Combine localStorage (almacenamiento local) aquí para realizar la función.

// 全局前置路由守卫——初始化的时候被调用、每次路由切换之前被调用
router.beforeEach((to, from, next) => {
  var email = localStorage.getItem("token");
  console.log(to);
  console.log("token");
  if(to.path== "/"){
    next({
      name: "login", // 将跳转的路由path作为参数，登录成功后跳转到该路由
    });
  }
  else if(!email && to.path == "/sign"){
    next()
  }else if (!email && to.path != "/login") {
    //未登录，强制登录
    next({
      name: "login", // 将跳转的路由path作为参数，登录成功后跳转到该路由
    });
  } else {
    next();
  }
});