Vue 路由权限控制,只能从登陆页面进入

1、设置路由是否需要校验的阙值:

  在路由配置上加上 meta 的判断:

routes: [{
    path: '/',
    name: 'Login',
    component: () => import('@/pages/login/login')
  }, {
    path: '/home',
    name: 'Home',
    meta: {requireAuth: true},
    components: {
      default: () => import('@/pages/home/home')
    }
  }]

2、设置登录保存状态:

    let loginstatus = true
    this.$store.commit('setRouting', loginstatus)

    // 在vuex文件中
    loginstatus: sessionStorage.getItem('loginstatus') || false

    setRouting (state, loginstatus) {
      state.loginstatus = loginstatus
      sessionStorage.setItem('loginstatus', loginstatus)
    }     

  这里为什么用sessionStorage存储,而不是localStorage、因为localStorage是永久的存储,如果用它做判断条件,失去了做权限的意义。
sessionStorage当页面关闭后,存储的数据就会消失,适合用来判断是否登录,还有一点,vue项目的是单页面应用,所以可以使用sessionStorage来实现

3、路由登陆跳转权限控制:

  在main.js 中设置路由配置:

// 配置路由权限
router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
    if (sessionStorage.getItem('loginstatus')) { // 判断本地是否存在access_token
      next()
    } else {
      // 未登录,跳转到登陆页面,并且带上 将要去的地址,方便登陆后跳转。
      next({
        path: '/',
        query:{ referrer: to.fullPath}
      })
    }
  } else {
    next()
  }
})

在除去登录页面之外的路由都设置meta,就可以实现只能从登录页面登录了。

猜你喜欢

转载自www.cnblogs.com/tg666/p/12539518.html
今日推荐