vue是单页面应用,各个页面的跳转需要路由支持,当然也可以通过v-if/v-show 来实现,但是实际开发中不现实。为一个项目做鉴权就可以用解决方案去vuex里面读取状态,根据状态来调用 vue-router的路由守卫来实现鉴权路由跳转。
正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的, 单个路由独享的,或者组件级的。记住参数或查询的改变并不会触发进入/离开的导航守卫。
一、全局路由守卫
所谓全局路由守卫,就是小区大门,整个小区就这一个大门,你想要进入其中任何一个房子,都需要经过这个大门的检查。
全局路由守卫有个两个:一个是全局前置守卫,一个是全局后置守卫
你可以使用 router.beforeEach
注册一个全局前置守卫:
router.beforeEach((to, from, next) => {
console.log(to) => // 到哪个页面去?
console.log(from) => // 从哪个页面来?
next() => // 一个回调函数
}
router.afterEach(to,from) = {} next():回调函数参数配置
to: Route: 即将要进入的目标 路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
- next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址
- next(’/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。你可以向 next 传递任意位置对象,且允许设置诸如
replace: true
、name: 'home'
之类的选项以及任何用在router-link
的 to prop 或router.push
中的选项。 - next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例,则导航会被终止且该错误会被传递给
router.onError()
注册过的回调。
二、组件路由守卫
跟 methods: {}等同级别书写,组件路由守卫是写在每个单独的 vue 文件里面的路由守卫
beforeRouteEnter (to, from, next) { // 注意,在路由进入之前,组件实例还未渲染,所以无法获取 this 实例,只能通过 vm 来访问组件实例 next(vm => {}) }
beforeRouteUpdate (to, from, next) { // 同一页面,刷新不同数据时调用, }
beforeRouteLeave (to, from, next) { // 离开当前路由页面时调用 }
const Foo = {
template: `...`,
beforeRouteEnter(to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不!能!获取组件实例 `this`
// 因为当守卫执行前,组件实例还没被创建
},
beforeRouteUpdate(to, from, next) {
// 在当前路由改变,但是该组件被复用时调用
// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
// 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},
beforeRouteLeave(to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}
}
三、路由独享守卫
路由独享守卫是在路由配置页面单独给路由配置的一个守卫
export default new VueRouter({ routes: [
{
path: '/',
name: 'home', component: 'Home',
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
这些守卫与全局前置守卫的方法参数是一样的。
页面鉴权
// 鉴权页面路由
{
path:"/userinfo",
name:"userinfo",
component:()=>import('@/views/Auth'),
meta:{auth:true}
},
import store from '../store'
// 进入路由之前触发
// to 要进入的路由
// from 从那个路由过来的
router.beforeEach(function(to, from, next){
if(to.meta.auth){ //鉴权页面标记
// 进入userinfo 要判断是否登录
if(store.state.user.isLoading){ // 在登录中
// 携带参数path 如果有多个页面都需要登录验证
next({name:"Auth",query:{path:to.name}}) //跳转到鉴权页面
}else if(store.state.user.islogin){ // 登录成功
next() // 正常跳转
}else{ // 没有登录
next({name:"login"}) //跳转到登录页面
}
return
}
next()
})
鉴权页面
<template>
<Center>
<!-- auth 鉴权 -->
验证中
</Center>
</template>
<script>
import Center from '@/components/Center'
import {mapState} from 'vuex'
export default {
components:{
Center
},
computed:mapState('user',['data','isLogin','isLoading']),
watch:{
isLogin:{ // 监听登录状态变化
immediate:true,
handler(){
this.handleLogin()
}
},
isLoading:{
immediate:true,
handler(){
this.handleLogin()
}
}
},
methods:{
handleLogin(){
if(this.isLoading) return // 是否在登录中
if(this.isLogin){ // 是否在登录成功
if(this.$route.query.path){
// 跳转this.$route.query.path 路径
this.$router.push({name:this.$route.query.path})
}else{
// 没有指定页面路由 就跳转个人中心
this.$router.push({name:'userinfo'})
}
}else{
// 跳转登录页
this.$router.push({name:'login'})
}
}
}
}
</script>