Vue-路由护卫

Vue路由护卫是一种用于在访问路由之前和之后执行某些逻辑的机制。它们可以用来控制用户是否可以访问某个特定路由，并在路由变化时执行一些操作。在Vue路由中，有三种类型的路由护卫：
**全局路由护卫：**在任何路由变化时都会触发的路由护卫。可以用来检查用户的登录状态或者执行某些全局的操作。全局路由护卫分为三种：
beforeEach: 在进入每个路由之前触发的路由护卫。
afterEach: 在离开每个路由之后触发的路由护卫。
beforeResolve: 在导航被确认之前触发的路由护卫。
**路由独享的守卫：**只对某个特定的路由生效的路由护卫。可以为每个路由配置自己的路由护卫函数。
**组件级别的守卫：**在某个路由对应的组件内部触发的路由护卫。可以在组件内部定义beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave这三个钩子函数来实现。
使用路由守卫可以控制访问权限，实现用户认证和授权，以及在路由切换时执行一些操作，如获取数据、清理资源等。

步骤：
1.下载 js-cookie (npm i js-cookie@3.0.1)
2.登录界面引入

import Cookie from 'js-cookie'

3.token信息存入cookie，用于不同页面的通信

Cookie.set("token",token)

4.//添加全局前置导航守卫

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

    //判断token是否存在
    const token = Cookie.get('token')
    if (!token && to.name !== 'login') {

        //用户未登录且当前未在登录界面
        next({
    name: 'login' })
    } else if (token && to.name === 'login') {

        next({
    name: 'home' })
    } else {

        next()
    }
})

原文链接: https://blog.csdn.net/qq_53568730/article/details/138162002