路由守卫

页面结构

<body>
    <div id="app">
        <h1>路由守卫</h1>

        <!-- 路由渲染组件 -->
        <router-view></router-view>

        <br />

        <router-link to="/">跳转首页</router-link>
        <router-link to="/user">跳转会员中心</router-link>
        <router-link to="/product">跳转产品页</router-link>
    </div>
</body>

<script src="./vue.min.js"></script>
<!--要引入路由组件-->
<script src="./vue-router.js"></script>

逻辑结构

const Home = {
    template: `<h1>首页</h1>`
}

const User = {
    template: `<h1>会员中心</h1>`
}

const Product = {
    template: `<h1>产品中心</h1>`
}

const Login = {
    template: `<h1>登录界面</h1>`
}

//创建路由对象
const router = new VueRouter({
    routes: [
        {
            path: '/',
            component: Home,
        },
        {
            path: '/user',
            component: User,
            //给这个路由添加自定义信息
            meta: {
                IsLogin: true
            }
        },
        {
            path: '/product',
            component: Product,
        },
        {
            path: '/login',
            component: Login,
        },
    ]
})

//全局前置路由守卫
router.beforeEach((to, from, next) => {
    //to 这个参数代表 去到哪个路由
    //from 这个参数代表 从哪里来
    //next 这个参数代表 是否可以去到下一步
    //我们可以根据to当中是否有meta信息来判断当前的路由是否需要登录
    //这个就是我们常见的判断是否有登录
    var IsLogin = to.meta.IsLogin ? to.meta.IsLogin : false
    //如果IsLogin=true 就说明是需要登录的，否则就不需要登录
    if(IsLogin)
    {
        // 需要登录去到登录界面
        next('/login')
    }else
    {
        //不需要登录直接去到下一步
        next()
    }
})

//全局后置路由守卫
router.afterEach((to, from) => {
    // 你也可以注册全局后置钩子，然而和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身
    // console.log('全局后置路由守卫')
})

//在全局中加载路由
var app = new Vue({
    el:'#app',
    router,
})

组件内的守卫

<template>
  <div>
    <h1>列表页面</h1>
  </div>
</template>
<script>
export default {
  beforeRouteEnter(to, from, next) {
    //进入路由前
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    next(vm => {
        // 通过 `vm` 访问组件实例
        console.log(vm)
    })
    next()
  },
  beforeRouteUpdate(to, from, next) {
    //更新路由前
    // 在当前路由改变，但是该组件被复用时调用
    console.log("组件更新时触发");
    next()
  },
  beforeRouteLeave(to, from, next) {
    // 可以访问组件实例 `this`
    console.log("导航离开该组件的对应路由时调用");
    next()
  },
};
</script>

脚手架中使用方式

const app = createApp(App)
    .use(router)  //挂载路由
    .use(Vant)   //挂载UI组件
    .use(api)  //挂载接口   === install
    .use(VueCookies)
    .mount('#app')


//添加路由守卫做判断是否有无登录
router.beforeEach(async (to, from, next) => {
    if(to.meta.auth)
    {
        //需要登录

        //判断是否有无cookie 
        var LoginUser = app.$cookies.get('LoginUser')

        //没有登录就跳转到登录界面
        if(!LoginUser)
        {
            next('/user/base/login')
            return
        }

        //获取id
        var userid = LoginUser.id ? LoginUser.id : 0;

        //接口请求
        var result = await api.check({userid:userid})

        if(result.code == 0)
        {
            //验证失败
            app.$cookies.remove('LoginUser')

            //跳转了
            next('/user/base/login')
            return
        }else
        {
            //验证成功
            //覆盖cookie
            app.$cookies.set('LoginUser', result.data)

            //让他去到该去的路由
            next()
        }
    }else
    {
        //不需要登录,直接跳转路由
        next()
    }
})
powered by GitbookEdit Time： 2024-06-06 18:25:41