Guardia de enrutamiento de enrutamiento Vue

guardia de ruta

Como sugiere el nombre, la protección de navegación proporcionada por vue-router se utiliza principalmente para proteger la navegación mediante saltos o cancelaciones. En pocas palabras, está en el salto de enrutamiento

Algunos ganchos al saltar de una página a otra, puedes hacer algo antes, durante y después del salto.

Lo que debe hacer antes y después de abrir una página.

Cada método de guardia recibe parámetros:

a : el objetivo que se va a introducir, que es un objeto de enrutamiento
from : La ruta que la navegación actual está a punto de dejar también es un objeto de ruta
next : opcional, es un método para ir directamente a la siguiente ruta

Puede usar router.beforeEach para registrar una protección previa global, y cuando se activa una navegación, esta función de devolución de llamada se ejecutará de forma asíncrona.

to se refiere a la página de la que procede, y from significa que procede del directorio raíz. a: de donde de: a donde ir

//2.创建路由实例并传递上面路由对象routes
    const router = createRouter({
//路由的一种前端展现方式，通常使用这个就行了
        history: createWebHistory(),
        routes
  }
)

//定义前置路由守卫。进入某个页面之前需要干什么
router.beforeEach((to,from,next) => {
    console.log(to)
    console.log(from)
})

router.beforeEach((to, from, next) => {
//如果用户访问登录页，直接放行
    if(to.path == '/login') {
        return next()
}

const token = '' //模拟token，正常是从本地cookie或localstorage中获取

if (token) {
    return next() //如果有token，则正常跳转访问
} else {
    return next('/login') //如果没有token，跳转到登录页
}
})

1. Guardia mundial

1. Primera guardia mundial

gramática:

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

Descripción del parámetro:
a : qué ruta ingresar a
from : qué ruta dejar
next : función para decidir si mostrar la página de la ruta que desea ver.

Ejemplo:
configuración de guardias globales en main.js

En main.js, hay un enrutador de objetos de creación de rutas. Establecer guardias en main.js ya es una guardia global.
De la siguiente manera, determine si la ruta a.path está ingresando actualmente es inicio de sesión o registro, y si es así, ejecute next() para mostrar la interfaz actual. De lo contrario, aparece una alerta y pasa a la pantalla de inicio de sesión.
De esta forma, se puede dar cuenta de que cuando el usuario no ha iniciado sesión, siempre se muestra la interfaz de inicio de sesión.

router.beforeEach((to,from,next)=>{
  if(to.path == '/login' || to.path == '/register'){
    next();
  }else{
    alert('您还没有登录，请先登录');
    next('/login');
  }})

Guardia de enrutamiento de enrutamiento Vue

Supongo que te gusta