路由守卫

beforeEach()全局前置守卫：初始化时执行、每次路由切换前执行；

src/router.js

//引入路由对象
import { createRouter, createWebHashHistory} from "vue-router"

//引入组件
import home from './components/home.vue'
import about from './components/about.vue'

// 创建路由
export default createRouter({
    history: createWebHashHistory(), //hash路由模式
    linkExactActiveClass: 'active',  //点击路由跳转的底部样式标量
    //路由列表
    routes: [
        {
            path: '/',
            name: 'home',
            component: home
        },
        {
            path: '/about',
            name: 'about',
            component: about,
            //给这个路由添加自定义信息, 让改路由在登录状态下才能访问
            meta: {
                IsLogin: true
            }
        },
    ]
})

页面结构 组件home

<template>
    <router-link to="/about">跳转到About页面</router-link><br />
</template>

入口文件 main.js

// 创建app的应用 mount挂载到 id=app的这个根容器里面
var app = createApp(App)
    .use(router)  //将路由的功能 挂载到vue应用上面
    .use(Vant)  //挂载UI框架
    .use(api)  //挂载接口
    .use(VueCookies) //挂载cookie  
    .mount('#app')


//给路由增加一个钩子函数 - 全局前置路由守卫 - 你访问的任何一个路由 都要先进入这里做判断
//to 这个参数代表 去到哪个路由
//from 这个参数代表 从哪里来
//next 这个参数代表 是否可以去到下一步
//我们可以根据to当中是否有meta信息来判断当前的路由是否需要登录
router.beforeEach(async (to, from, next) => {
    //获取meta信息,判断如果为true就是需要登录，false不需要登录
    var IsLogin = to.meta.auth ? to.meta.auth : false

    if(IsLogin)
    {
        //判断登录

        // 先去获取cookie
        var LoginAuth = app.$cookies.get('LoginAuth')

        //没有cookie信息
        if(!LoginAuth || JSON.stringify(LoginAuth) == "{}")
        {
            // 跳转到登陆页面
            next('/business/base/login')
            return false
        }

        //获取用户id
        var busid = LoginAuth.id ? LoginAuth.id : 0
        var mobile = LoginAuth.mobile ? LoginAuth.mobile : ''

        //组装数据
        var data = {
            busid,
            mobile
        }

        //根据id去找这个人是否真实存在
        var result = await app.$api.check(data)

        // 验证成功
        if(result.code)
        {
            //覆盖一下cookie
            app.$cookies.set('LoginAuth', result.data)

            next()
        }else
        {
            //删除掉伪造非法cookie
            app.$cookies.remove('LoginAuth')

            //回到登录界面
            next('/business/base/login')
        }
    }else
    {
        //不需要判断登录
        next()
    }
})