Vue —— 进阶 vue-router 路由（三）（全局路由守卫）

Vue2.x 系列文章目录

内容	参考链接
Vue2.x - 基础	Vue2.x - 基础
Vue2.x - 进阶	Vue2.x - 进阶脚手架
Vue2.x - 高级 Vuex	Vuex概念、工作原理、环境搭建、基本使用、getters
Vue2.x - 高级 Vuex	Vuex 四个 map 的用法、模块化和命名空间
Vue2.x - 高级 Vue-router	路由的概念、基本使用
Vue2.x - 高级 Vue-router	嵌套路由、query参数、命名路由、params参数、props配置
Vue2.x - 高级 Vue-router	replace属性、编程式路由导航、缓存路由组件、路由的专属钩子
Vue2.x - 高级 Vue-router	全局路由守卫
Vue3.0 - 新增	Vue3.0 新增内容
Vue2.x 项目（附源码）	Vue + ElementUI 后台管理项目（附源码）
Vue3.0 项目	Vue3.0 企业级 App

---

路由守卫

1. 分类

1. 全局守卫
2. 独享守卫
3. 组件内守卫

一、全局路由守卫

1. 作用

1. 全局路由守卫分为 全局_前置路由守卫 和 全局_后置路由守卫。
2. 对路由进行权限控制。

2. 基本代码

全局前置路由守卫：初始化的时候被调用、每次路由切换之前被调用。

	router.beforeEach((to, from, next) => {
	  console.log('前置路由守卫', to, from);
	  if (to.meta.isAuth) { //判断当前路由是否需要进行权限控制
	      if (localStorage.getItem('school') === 'shandong') { //控制权限的具体规则
	        next() //放行
	      } else {
	        alert('学校名不对，无权限查看！')
	      }
	  } else {
	    next() //放行
	  }
	})

全局后置路由守卫：初始化的时候被调用、每次路由切换之后被调用。

	router.afterEach((to, from) => {
	  console.log('后置路由守卫', to, from);
	  if(to.meta.title) {
		document.title = to.meta.title //修改网页的title
      } else {
		doument.title = 'vue_test'	
	  }
	})

3. 实例：路由守卫的拦截

1. 当条件判断正确的时候（school 为 shandong），才能看到 News 和 Message 的信息。
2. 利用全局守卫来授权。

全局路由守卫

index.js

1. 给每个路由配置 meta。
2. 给路由的标题命名：meta: {title: 'xxx'}。
3. 开启查看权限：meta: {isAuth: true, title: 'xxx'}

	const router = new VueRouter({
	
	  ......
	  children: [{
        name: 'xiangqing',
        path: 'detail/:id/:title',
        component: Detail,
        meta: {
          isAuth: true, //开始权限
          title: '详情' //路由标题
        },
        props($route) {
          return {
            id: $route.params.id,
            title: $route.params.title
          }
        } 
     }]
     ......
   })
	// 全局前置路由守卫——初始化的时候被调用、每次路由切换之前被调用
	router.beforeEach((to, from, next) => {
	  console.log('前置路由守卫', to, from);
	  if (to.meta.isAuth) {
	    if (localStorage.getItem('school') === 'shandong') {
	      next()
	    } else {
	      alert('学校名不对，无权限查看！')
	    }
	  } else {
	    next()
	  }
	})
	
	// 全局后置路由守卫——初始化的时候被调用、每次路由切换之后被调用
	router.afterEach((to, from) => {
	  console.log('后置路由守卫', to, from);
	  document.title = to.meta.title || '初始页'
	})

	export default router

二、独享路由守卫

1. 作用

只对当前路由进行权限控制。

2. 实例：独享守卫的拦截

独享路由守卫

1. 只对 News 这一个路由组件进行权限控制。
2. 独享守卫可以与全局守卫一起使用。

	......
	name: 'xinwen',
	path: 'news',
	component: News,
	meta: {
	    isAuth: true,
	    title: '新闻'
	},
	beforeEnter: (to, from, next) => {
      console.log('独享路由守卫', to, from);
      if (to.meta.isAuth) {
        if (localStorage.getItem('school') === 'shandong') {
          next()
        } else {
          alert('学校名不对，无权限查看！')
        }
      } else {
        next()
      }
    }
    ......
    router.afterEach((to, from) => {
      document.title = to.meta.title || '初始页'
      console.log('后置路由守卫', to, from);
	})

三、组件内路由守卫

1. 两个守卫

1. 进入守卫：通过路由规则，进入该组件时被调用。
2. 离开守卫：通过路由规则，离开该组件时被调用。

2. 基本语法

    //进入守卫
    beforeRouteEnter(to, from, next) {...}
    //离开守卫
    beforeRouteLeave(to, from, next) {...}

3. 实例：组件内的守卫

组件内守卫

About.vue

1. 组件内的守卫也可以和其他守卫一起使用。

	<template>
	  <h2>我是About的内容</h2>
	</template>
	
	<script>
	export default {
	  name: "myAbout",
	  // 通过路由规则，进入该组件时被调用
	  beforeRouteEnter(to, from, next) {
	    console.log("About——beforeRouteEnter", to, from);
	    if (to.meta.isAuth) {
	      if (localStorage.getItem("school") === "shandong") {
	        next();
	      } else {
	        alert("学校名不对，无权限查看！");
	      }
	    } else {
	      next();
	    }
	  },
	  // 通过路由规则，离开该组件时被调用
	  beforeRouteLeave (to, from, next) {
	    console.log("About——beforeRouteLeave", to, from);
	    next()
	  }
	};
	</script>

不积跬步无以至千里 不积小流无以成江海

点个关注不迷路（持续更新中…）