vue-router路由校验登录、拦截方案

一、路由初始化时的拦截功能

1. 首页不拦截，用户登陆成功后，将登陆标识存储在cookie中，将获取的权限树json转换为字符串存储在localStorage内
2. 路由切换时
   • 根据cookie保存的token信息验证是否登录
   • 通过localStorage存储的权限树字符串去检索有没有当前路由，有，跳转；没有跳转到首页

router.beforeEach((to, from, next) => {
  let isLogin = Cookie.get('token') // 是否登录
  setTimeout(() => {
    // 判断用户是否登录
    if (isLogin) {
      let routerList = localStorage.getItem('uri_devops')
      if (routerList.indexOf(to.path) > 0) {
        // 判断路由来源是否有query，处理不是目的跳转的情况
        if (Object.keys(from.query).length === 0) {
          next()
        } else {
          // 如果来源路由有query
          let redirect = from.query.redirect
          // 这行是解决next无限循环的问题 
          // path不带query参数fullPath带query参数
          if (to.fullPath === redirect) {
            next()
          } else {
            // 跳转到目的路由
            next({ path: redirect })
          }
        }
      } else {
        next({
          path: '/'
        })
      }
    } else {
      if (to.path === '/login') {
        next()
      } else {
        // 将目的路由地址存入login的query中
        next({
          path: '/login',
          query: {redirect: to.fullPath}
        })
      }
    }
  }, 100)
})

二、其他

1. 多功能页面回跳技巧

beforeRouteEnter(to, from, next) {
  next(vm => vm.setData(from.path))
},
methods: {
    to_my_apply_list() {
      if (this.from_path.indexOf('/money/manage') > -1 || this.from_path.indexOf('/affirm') > -1) {
        this.$router.back(-1)
      } else {
        this.$router.push({
          path: '/money/manage?type=borrow&fil=&page=1'
        })
      }
    },
    setData(from_path) {
      this.from_path = from_path
    }
}