Protetor de roteamento de roteamento Vue

guarda de rota

Como o nome sugere, a proteção de navegação fornecida pelo vue-router é usada principalmente para proteger a navegação saltando ou cancelando. Simplificando, é no salto de roteamento

Alguns ganchos ao pular de uma página para outra, você pode fazer algo antes, durante e depois do salto.

O que você precisa fazer antes e depois de abrir uma página.

Cada método de guarda recebe parâmetros:

to : o destino a ser inserido, que é um objeto de roteamento
from : A rota que a navegação atual está prestes a deixar também é um objeto de rota
next : opcional, é um método para ir diretamente para a próxima rota

Você pode usar router.beforeEach para registrar uma pré-guarda global e, quando uma navegação for acionada, essa função de retorno de chamada será executada de forma assíncrona.

to refere-se a qual página deve vir e from significa vir do diretório raiz. para: de onde de: para onde 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. Guarda global

1. Proteção frontal global

gramática:

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

Descrição do parâmetro:
para : qual rota entrar para
de : qual rota sair
a seguir : função para decidir se deseja exibir a página da rota que você deseja ver.

Exemplo:
Definindo guardas globais em main.js

Em main.js, há um roteador de objeto de instanciação de rota. Definir guardas em main.js já é uma guarda global.
Da seguinte forma, determine se o caminho to.path que está sendo inserido no momento é login ou registro e, em caso afirmativo, execute next() para exibir a interface atual. Caso contrário, um alerta aparece e se move para a tela de login.
Desta forma, pode-se perceber que quando o usuário não está logado, a interface de login é sempre exibida.

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

Protetor de roteamento de roteamento Vue

Acho que você gosta