Vue路由鉴权

路由导航钩子做鉴权

/router/index.js

var router;
export default router = new Router({
  routes : [
    {
      path: '/profile/address',
      name: 'MyAddress',
      component: MyAddress,
      meta: {
        title: '我的地址',
        requireAuth: true  // 只要此字段为true，必须做鉴权处理
      }
    },
    // 更多...
  ]
})

let indexScrollTop = 0
router.beforeEach((to, from, next) => {
  // 路由进入下一个路由对象前，判断是否需要登陆
  // 在路由meta对象中由个requireAuth字段，只要此字段为true，必须做鉴权处理
  if (to.matched.some(res => res.meta.requireAuth)) {
    // userData为存储在本地的一些用户信息
    let userData = getUserData()
    // 未登录和已经登录的处理
    // getUserData方法处理后如果userData.token没有值就是undefined，下面直接判断
    if (userData.token === undefined) {
      // 执行到此处说明没有登录，君可按需处理之后再执行如下方法去登录页面
      // 我这里没有其他处理，直接去了登录页面
      next({
        path: '/login',
        query: {
          redirect: to.path  // 将跳转的路由path作为参数，登录成功后再跳转到该路由
        }
      })
    } else {
      // 执行到说明本地存储有用户信息
      // 但是用户信息是否过期还是需要验证一下滴
      let overdueTime = userData.overdueTime
      let nowTime = +new Date
      // 登陆过期和未过期
      if (nowTime > overdueTime) {
        // 登录过期的处理，君可按需处理之后再执行如下方法去登录页面
        // 我这里没有其他处理，直接去了登录页面
        next({
          path: '/login',
          query: {
            redirect: to.path
          }
        })
      } else {
        next()
      }
    }
  } else {
    next()
  }
  if (to.path !== '/') {
    // 记录现在滚动的位置
    indexScrollTop = document.body.scrollTop
  }
  document.title = to.meta.title || document.title
})

router.afterEach(route => {
  if (route.path !== '/') {
    document.body.scrollTop = 0
  } else {
    Vue.nextTick(() => {
    // 回到之前滚动位置  
      document.body.scrollTop = indexScrollTop
    })
  }
})
export default

导航去登录页面调用的​​next​​​方法里面有个​​query​​对象，携带了目标路由的地址，这是因为在登录成功后我们需要重定向到目标页面。

---

知识点

​​router-link​​

1.在HTML5 history模式下使用了base选项,所有to属性可以不用写基路径
2.会拦击点击事件,不会重新加载页面.
3.router-link默认渲染为a标签,我们可以通过tag属性设置为别的标签(常用的li).
4.to属性可以绑定name(命名组件),query(带查询参数)

<router-link :to="{name:'entityList', query:{page: 'Ecp.SystemMessage.List.vdp'}}" tag="li">

</router-link>

.

​​router-view​​

1.router-view: 渲染匹配到的视图组件,router-view匹配到的视图组件里面还可以嵌套自己的router-view.根据嵌套路径(children)来继续渲染.
2.router-view可以通过name属性来渲染对应的component下相应的组件
3.router-view可以配合transition与keep-alive使用,如果同时使用,里面要使用keep-alive.
4.keep-alive缓存router的请求

<transition  name="fade" mode="out-in" key="$route.path">
  <keep-alive>
     <router-view></router-view>
  </keep-alive>
</transition>