vue-router路由守卫进阶

vue-router路由守卫进阶

路由守卫，可以想象为古代御前侍卫，路由守卫，则是对路由进行权限控制

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

1. 全局前置-路由守卫

   作用：主要用来鉴权

   用户点击导航区，随后引起路径的改变，前端路由器监测到，进行规则的匹配，在合适的位置呈现组件。

   

   调用时机：初始化时被调用，每次路由切换之前调用

   写法：

   router.beforeEach((to, from, next) => {
   	// 判断当前路由是否需要进行权限控制  
   	if(to.meta.isAuth) {    
   		// 权限控制规则    
   		if(localStorage.getItem("token")){      
   			next() // 放行    
   		}  
   	} else if(to.path == '/home'){    
   		next()  
   	} else {    
   		console.log("暂无权限");  
   	}
   });
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13

   参数说明：

   导航钩子的三个参数解析：

   • to：即将要进入的目标路由对象
   • from：当前导航即将要离开的路由对象
   • next：调用该方法后，才能进入下一个钩子

2. 全局后置守卫

   在一个单页面spa应用中，如果改变网页的标题呢？

   • 网页标题是通过
   • 但我们可以通过js来修改
   • 在vue项目中，如何修改更合适?

   普通的修改方式：

   • 比较容易想到的修改标题的位置是每一个路由对应的组件.vue文件中。
   • 通过mounted声明周期函数，执行对应的代码进行修改即可。
   • 但当页面比较多时，这种方式不容易维护（因为需要在多个页面执行类似的代码）

   有没有更好的方式呢，使用路由后置守卫即可

   路由后置守卫使用说明：

   主要作用：变更页签标题

   调用时机：初始化被调用，每次路由切换之后调用

   写法：

   router.afterEach((to, from) => {
     document.title = to.meta.title
   })
   1
   2
   3

   可以利用afterEach来完成标题的修改。具体实现步骤如下：

   1. 可以在钩子当中定义一些标题，利用meta来定义

   // 定义路由
   const routes = [
     {
       path:'/index',
       component:Home,
       meta:{
         title:"首页"
       }
     },
     {
       path:"/about",
       component:About,
       meta:{
         title:"关于"
       }
     }
   ]
   // 利用导航守卫。修改我们的标题
   router.afterEach((to, from) => {
     document.title = to.meta.title
   })
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21

3. 独享守卫

   对某一个路由单独进行控制的守卫

   比如只对系统配置进行限制

   const routes = [
     {
       path: "/system",
       name: "System",
       component: () => import(/* webpackChunkName: "system" */ "@/views/System"),
       beforeEnter: (to, from, next) => {
         if(to.meta.isAuth) {
           if(localStorage.getItem("token")){
             next()
           }
         } else {
           console.log("暂无权限");
         }
       }
     },
   ]
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16

4. 组件内路由守卫

   在组件文件内部写，beforeRouteEnter、beforeRouteLeave

   调用时机：通过路由规则，beforeRouteEnter进入该组件时被调用，beforeRouteLeave离开该组件时被调用

   // 进入守卫，通过路由规则，进入该组件时被调用
   beforeRouteEnter(to, from,next){
   
   },
   // 进入守卫，通过路由规则，离开该组件时被调用
   beforeRouteLeave(to,from,next){
   
   }
   1
   2
   3
   4
   5
   6
   7
   8

5. keep-alive遇见vue-router

   keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态或避免重新渲染

   • include：字符串或正则表达，只有匹配的组件会被缓存
   • exclude：字符串或正则表达式，匹配的组件都不会被缓存

   router-view也是一个组件，如果直接被包在keep-alive里面，所有路径匹配的视图组件都会被缓存

   <keep-alive>
     <router-view>
       // 所有路径匹配到的视图组件会被缓存
     </router-view>
   </keep-alive>
   1
   2
   3
   4
   5

6. 路由器的两种工作模式，history模式与hash模式

   对于一个Url来说，什么是hash值？#及其后面的内容就是hash值。

   hash值不会包含在HTTP请求中，即：hash值不会带给服务器。

   hash也就是锚点（#），本质上是改变window.loaction的href属性。

   我们可以通过直接复制window.location.hash来改变href，页面不发生刷新

   hash模式：

   • 地址永远带着#号，不美观
   • 如果以后将地址通过第三方手机app分享，app校验严格，则地址会被标记为不合法
   • 兼容性好。

   history模式：

   这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

   当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！

   不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。

   • 地址干净，美观
   • 兼容性和hash模式相比略差，IE9不兼容（可使用强制刷新处理）
   • 应用部署上线时，需要后端人员支持，解决刷新页面服务端404问题。

   url的hash、h5的history，默认情况下，路径的改变使用的是URL的hash模式，如果希望使用HTML5的history模式，非常简单，进行如下配置即可：

   const router = new VueRouter({
     routes,
     mode:'history'
   })
   1
   2
   3
   4