Vue-router中路由守卫的用法

作用：对路由进行权限控制

分类：全局守卫、独享守卫、组件内守卫 

全局守卫:  

        可以使用 router.beforeEach 注册一个全局前置守卫： 全局前置守卫：初始化时执行、每次路由切换前执行

        可以使用 router.afterEach 注册一个全局后置守卫： 全局后置守卫：初始化时执行、每次路由切换后执行

    守卫中的参数：

• to: Route: 即将要进入的目标（路由对象）

• from: Route: 当前导航正要离开的路由

• next: Function:  调用该方法来控制接下来的行为       （后置守卫中没有这个参数）

//引入VueRouter
import VueRouter from 'vue-router'
// 引入组件
import Home from '../pages/Home'
import Message from '../pages/Message'

//创建router实例对象，去管理一组一组的路由规则
const router =  new VueRouter({
    // 配置路由规则
    routes: [
        {
            name: 'message',
            path: "/message",
            component: Message,
            meta: {
                isAuth: true,   // 配置是否需要
                title: '信息'
            }
        },
        {   
            name: 'home',
            path: "/home",
            component: Home,
            meta: {
                title: '主页'
            }
            
        }
    ]
})
// 注册一个全局前置守卫
router.beforeEach((to, from, next) => {
    if(to.meta.isAuth) {    //判断当前路由是否需要进行权限控制
        if(localStorage.getItem('name') === 'abc'){    //权限控制的具体规则
            next()
        }else {
            alert("验证是失败")
        }
    } else {
        next() // 放行
    }
})

// 注册一个全局后置守卫
router.afterEach((to) => {
    if(to.meta.title) {
        document.title = to.meta.title //修改网页的title
    }else {
        document.title = 'course_demo'
    }
})

export default router

 

独享守卫

用法与全局守卫一致。只是，将其写进其中一个路由对象中，只在这个路由下起作用

beforeEnter(to, from, next) {}   设置在路由规则中

注意：独享守卫只有前置守卫  但是可以和全局后置守卫配合使用

routes: [
    {
        name: 'message',
        path: "/message",
        component: Message,
        meta: {
            title: '信息'
        },
        // 只在当前路由规则里有效
        beforeEnter(to, from, next) {
            if (localStorage.getItem('name') === 'abc') {    //权限控制的具体规则
                next()
            } else {
                alert("验证是失败")
            }
        }
    },
    
   ···
]

        

组件内守卫  

进入守卫：通过路由规则，进入该组件时被调用beforeRouteEnter (to, from, next) {}
离开守卫：通过路由规则，离开该组件时被调用beforeRouteLeave (to, from, next) {}

<template>
  <div>这是Message组件</div>
</template>

<script>
export default {
  name: 'Message',
  //进入守卫：通过路由规则，进入该组件时被调用
  beforeRouteEnter (to, from, next) {
    if(to.meta.isAuth) {    //判断当前路由是否需要进行权限控制
        if(localStorage.getItem('name') === 'abc'){    //权限控制的具体规则
            next()
        }else {
            alert("验证是失败")
        }
    } else {
        next() // 放行
    }
  },
  //离开守卫：通过路由规则，离开该组件时被调用
  beforeRouteLeave (to, from, next) {
    console.log("离开", to, from);
    next()
  }
}
</script>