Vue路由守卫

1、全局前置路由守卫

     本案例，是拦截news和message路由组件，只有admin角色用户才有权限访问。

import VueRouter from "vue-router"
//引入组件
import AboutInfo from "../pages/AboutInfo"
import HomeInfo from "../pages/HomeInfo"
import NewsInfo from "../pages/NewsInfo"
import MessageInfo from "../pages/MessageInfo"
import DetailInfo from "../pages/DetailInfo"

//创建并暴露一个路由器
const router =  new VueRouter({
    routes:[
        {
            path: "/about",
            component: AboutInfo
        },
        {
            path: "/home",
            component: HomeInfo,
            children:[
                {
                    name: "news",
                    path: "news",
                    component: NewsInfo
                },
                {
                    name: "message",
                    path: "message",
                    component: MessageInfo,
                    children:[
                        {
                            name: "detail",
                            path: "detail/:id/:title",
                            component: DetailInfo,
                            props: true //为true，params参数以props的形式传递给DetailInfo组件
                        }
                    ]
                }
            ]
        }
    ]
})

// 全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用
router.beforeEach((to, from, next)=>{
    if(to.name === "news" || to.name === "message"){ //访问news或message组件
        if(localStorage.getItem("role") === "admin"){
            next();
        }else{
            console.log("不是管理员权限，无权限查看！");
        }
    }else{
        next();
    }
});

export default router;

当前案例，判断哪些路由需要鉴权，需要写很多的if语句，为了解决这个问题，在路由身上的meta元数据添加是否需要鉴权的标识。优化后的案例如下：

import VueRouter from "vue-router"
//引入组件
import AboutInfo from "../pages/AboutInfo"
import HomeInfo from "../pages/HomeInfo"
import NewsInfo from "../pages/NewsInfo"
import MessageInfo from "../pages/MessageInfo"
import DetailInfo from "../pages/DetailInfo"

//创建并暴露一个路由器
const router =  new VueRouter({
    routes:[
        {
            path: "/about",
            component: AboutInfo
        },
        {
            path: "/home",
            component: HomeInfo,
            children:[
                {
                    name: "news",
                    path: "news",
                    component: NewsInfo,
                    meta:{isAuth: true}
                },
                {
                    name: "message",
                    path: "message",
                    component: MessageInfo,
                    meta:{isAuth: true},
                    children:[
                        {
                            name: "detail",
                            path: "detail/:id/:title",
                            component: DetailInfo,
                            props: true //为true，params参数以props的形式传递给DetailInfo组件
                        }
                    ]
                }
            ]
        }
    ]
})

// 全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用
router.beforeEach((to, from, next)=>{
    if(to.meta.isAuth){ //判断是否需要鉴权
        if(localStorage.getItem("role") === "admin"){
            next();
        }else{
            console.log("不是管理员权限，无权限查看！");
        }
    }else{
        next();
    }
});

export default router;

2、全局后置路由守卫

本案例是切换路由的时候，同时切换浏览器的title

示例代码：

//全局后置守卫，初始化时执行、每次路由切换后执行
router.afterEach((to, from)=>{
    console.log(to, from)
    document.title = to.meta.title || 'vue-demo2';
});

完整的代码如下：

import VueRouter from "vue-router"
//引入组件
import AboutInfo from "../pages/AboutInfo"
import HomeInfo from "../pages/HomeInfo"
import NewsInfo from "../pages/NewsInfo"
import MessageInfo from "../pages/MessageInfo"
import DetailInfo from "../pages/DetailInfo"

//创建并暴露一个路由器
const router =  new VueRouter({
    routes:[
        {
            path: "/about",
            component: AboutInfo,
            meta:{title: "关于"}
        },
        {
            path: "/home",
            component: HomeInfo,
            meta:{title: "主页"},
            children:[
                {
                    name: "news",
                    path: "news",
                    component: NewsInfo,
                    meta:{isAuth: true, title: "新闻"}
                },
                {
                    name: "message",
                    path: "message",
                    component: MessageInfo,
                    meta:{isAuth: true, title: "消息"},
                    children:[
                        {
                            name: "detail",
                            path: "detail/:id/:title",
                            component: DetailInfo,
                            props: true, //为true，params参数以props的形式传递给DetailInfo组件
                            meta:{title: "详情"}
                        }
                    ]
                }
            ]
        }
    ]
})

// 全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用
router.beforeEach((to, from, next)=>{
    if(to.meta.isAuth){ //判断是否需要鉴权
        if(localStorage.getItem("role") === "admin"){
            next();
        }else{
            console.log("不是管理员权限，无权限查看！");
        }
    }else{
        next();
    }
});

//全局后置守卫，初始化时执行、每次路由切换后执行
router.afterEach((to, from)=>{
    console.log(to, from)
    document.title = to.meta.title || 'vue-demo2';
});

export default router;

3、独享路由守卫

在路由配置里面添加单独的路由守卫，代码如下：

beforeEnter: (to, from, next) =>{
	if(localStorage.getItem("role") === "admin"){
		next();
	}else{
		console.log("不是管理员权限，无权限查看！");
	}
}

完整代码如下：

import VueRouter from "vue-router"
//引入组件
import AboutInfo from "../pages/AboutInfo"
import HomeInfo from "../pages/HomeInfo"
import NewsInfo from "../pages/NewsInfo"
import MessageInfo from "../pages/MessageInfo"
import DetailInfo from "../pages/DetailInfo"

//创建并暴露一个路由器
const router =  new VueRouter({
    routes:[
        {
            path: "/about",
            component: AboutInfo,
            meta:{title: "关于"}
        },
        {
            path: "/home",
            component: HomeInfo,
            meta:{title: "主页"},
            children:[
                {
                    name: "news",
                    path: "news",
                    component: NewsInfo,
                    meta:{isAuth: true, title: "新闻"},
                    beforeEnter: (to, from, next) =>{
                        if(localStorage.getItem("role") === "admin"){
                            next();
                        }else{
                            console.log("不是管理员权限，无权限查看！");
                        }
                    }
                },
                {
                    name: "message",
                    path: "message",
                    component: MessageInfo,
                    meta:{isAuth: true, title: "消息"},
                    children:[
                        {
                            name: "detail",
                            path: "detail/:id/:title",
                            component: DetailInfo,
                            props: true, //为true，params参数以props的形式传递给DetailInfo组件
                            meta:{title: "详情"}
                        }
                    ]
                }
            ]
        }
    ]
})


//全局后置守卫，初始化时执行、每次路由切换后执行
router.afterEach((to, from)=>{
    console.log(to, from)
    document.title = to.meta.title || 'vue-demo2';
});

export default router;

4、组件内路由守卫

export default {
   name: "HomeInfo",

   //通过路由规则，进入该组件时被调用
   beforeRouteEnter(to, from, next){
      console.log("HomeInfo--beforeRouteEnter", to, from);
      if(localStorage.getItem("role") === "admin"){
            next();
      }else{
            console.log("不是管理员权限，无权限查看！");
      }
   },

   //通过路由规则，离开该组件时调用
   beforeRouteLeave(to, from, next){
      console.log("HomeInfo---beforeRouteLeave", to, from);
      next();
   }
}