标签：地址 效果 pat type child slist targe vuex 异步
当做Vue-cli项目的时候感觉在路由跳转前做一些验证，比如登录验证，是网站中的普遍需求。
对此，vue-router 提供的 beforeEach可以方便地实现全局导航守卫（navigation-guards）。组件内部的导航守卫函数使用相同，只是函数名称不同（beforeRouteEnter 、beforeRouteUpdate(2.2 新增) 、beforeRouteLeave）。
官方文档地址：https://router.vuejs.org/zh-cn/advanced/navigation-guards.html
你可以使用 router.beforeEach 注册一个全局前置守卫：就是在你router配置的下方注册
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})
当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中。
每个守卫方法接收三个参数：
to: Route: 即将要进入的目标 路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed （确认的）。
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() 注册过的回调。
确保要调用 next 方法，否则钩子就不会被 resolved。
const router = new VueRouter({ ... }) //这是路由配置，我就不多说了
const whiteList = [‘/error‘, ‘/register/regindex‘, ‘/register/userauthent‘, ‘/register/submit‘] // 路由白名单
vueRouter.beforeEach(function(to,from,next){
console.log("进入守卫");
if (userInfo.user_id>0){
console.log("登录成功");
next(); //记得当所有程序执行完毕后要进行next()，不然是无法继续进行的;
}else{
console.log("登录失败");
getUserInfo.then(res => {
if(res){
if (res.user_id){
if (res.status == 4) {
//账号冻结
next({ path: ‘/error‘, replace: true, query: { noGoBack: true } })
}
if (res.status == 3) {
//认证审核中
next({ path: ‘/register/submit‘, replace: true, query: { noGoBack: true } })
}
if (res.status != 1 && res.status != 3) {
if (!res.mobile ) {
next({ path: ‘/register/regindex‘, replace: true, query: { noGoBack: true }})
} else {
//绑定完手机号了
next({ path: ‘/register/userauthent‘, replace: true, query: { noGoBack: true } })
}
}
next(); //记得当所有程序执行完毕后要进行next()，不然是无法继续进行的;
}else{
if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入
next(); //记得当所有程序执行完毕后要进行next()，不然是无法继续进行的;
}else{
next({ path: ‘/register/regindex‘, replace: true, query: { noGoBack: true }})
}
}
}else{
}
}
}).catch((