一、背景
之前写前端都是后端返回界面,跳转神马的完全不用自己操心,但是这次用 vue 写的前端,第一次前后端分离,后端只给前端提供数据接口,一开始还想着是后端控制界面的渲染神马的,但是后面一想,路由神马的都是前端控制的,后端的手伸不过来啊,于是乎就一直在逛 vue-router 的官网,想着应该会有相关的东西,然后发现了路由元信息,起初怎么也没看懂是什么意思,后面慢慢琢磨明白了,记录一下
二、代码分析
官网路由元信息

(1)路由定义

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      meta: { requiresAuth: true }// a meta field
    }
  ]
})

这里的 meta 字段就是路由元信息字段,requiresAuth 是自己起的字段名称,用来标记这个路由信息是否需要检测,true 表示要检测,false 表示不需要检测(这个名称随便起,比如我自己的就起的 requiresId,或者你懒得想,就直接 a ,b 这么起,当然,还是比较建议起个有意义的名称)

(2)js 代码

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App },
  render: h => h(App),
  created () {
    this.redrct()
  },
  methods: {
    redrct () {
      router.beforeEach((to, from, next) => {
        if (to.matched.some(record => record.meta.requiresId)) { //这里meta字段的名称要与上面route里面保持一致
          // this route requires Id, check if logged in
          // if not, redirect to login page.
          if (!this.loggedIn()) {  // 自己的判断条件
            next({
              path: '/', // 重定向后的路由
              query: { redirect: to.fullPath } // 登录成功之后可以根据query中的内容跳转回原来的路由(页面)
            })
          } else {
            next()
          }
        } else {
          next() // 确保一定要调用 next()
        }
      })
    },
    loggedIn () {
      var id = sessionStorage.getItem('userId')
      if (id === null) { // 未登录
        return false
      }
      return true  // 别忘了这句啊,之前忘写了,调了好半天呢
    }
  }
})
Logo

前往低代码交流专区

更多推荐