vue实现路由权限 :router.beforeEach实现路由判断页面未登录跳转到登录页面(路由拦截)

前面的话

在页面发生路由改变时，比如做登录验证，只有验证登录之后才能进入主界面，未登录不能跳转。vue-router提供了导航钩子beforeEach和afterEach，它们会在路由将改变前和改变后触发。那么登录验证就应该在beforeEach钩子完成。

概述

beforeEach函数有三个参数：

• to:router即将进入的路由对象 （这个对象中包含name，params，meta等属性）

• from:当前导航即将离开的路由 （这个对象中包含name，params，meta等属性）

• next:Function,进行管道中的一个钩子，如果执行完了，则导航的状态就是 confirmed （确认的）；否则为false，终止导航。

  next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed （确认的）。

  next(false): 中断当前的导航。如果浏览器的 URL 改变了（可能是用户手动或者浏览器后退按钮），那么 URL 地址会重置到 from 路由对应的地址。

  next(’/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断，然后 进行一个新的导航。

  next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

afterEach函数不用传next()函数

实例

router.beforeEach((to, from, next)=> {
// console.log("先判断是否登录");
// 如果是登录页则用next方法resolve掉这个钩子 
  if (to.name == 'Login') {
    next();
    return;
  }
// // 从store中读取是否获取了已登录的信息
  var name = store.state.user.name;
  if (name == '未登录') {
//  // 判断该路由是否需要登录权限
    if (to.meta.requireAuth || to.name == null) {
    // 把要跳转的地址作为参数传到下一步
      next({path: '/', query: {redirect: to.path}})
    } else {
      next();
    }
  }  
  }
}
)

我们在代码中做了一个判断 if (to.name === ‘Login’) ,也就是说当我们要跳转的路由对象是Login时候，才会进入导航守卫中判断条件，当我们点击其他链接跳转其他页正常。

store中的数据

state中保存着user的数据，只能读取，通过this.$store.commit()改变。

点击登录按钮绑定的方法

请求成功之后，改变store中user.name，并且跳转到主页面。