浅析三个vue-router权限控制方案，快来看看吧

2023-09-05 09:41:14

当系统需要进行权限验证时，一个常见需求便是：某些页面或资源仅在用户拥有相应权限时才可访问。如何根据用户的权限来判断其能否进入某个路由页面，就显得尤为重要。本文将针对vue-router这一框架来详细阐述实现方法。

一、方案一：路由守卫

简介

路由守卫是vue-router提供的一种机制，用于在导航(即页面的跳转)发生前进行拦截，以便检查当前用户是否拥有访问权限。

代码实现

import { Router } from 'vue-router'

const router = new Router({
  routes: [
    {
      path: '/private-page',
      component: PrivatePage,
      meta: {
        requiresAuth: true,
      },
    },
  ],
})

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth) {
    if (checkAuth()) {
      next()
    } else {
      next('/login')
    }
  } else {
    next()
  }
})

在代码中，我们通过在路由的元信息(meta)中添加requiresAuth字段，来标识该路由需要授权才能访问。然后，我们在beforeEach路由守卫中判断该字段是否存在，进而决定是否允许用户继续导航。

二、方案二：元信息

简介

与路由守卫不同，元信息是直接写在路由配置中的，可以理解为对路由的补充说明。

代码实现

import { Router } from 'vue-router'

const router = new Router({
  routes: [
    {
      path: '/private-page',
      component: PrivatePage,
      meta: {
        requiresAuth: true,
      },
    },
  ],
})

router.beforeEach((to, from, next) => {
  if (to.matched.some((record) => record.meta.requiresAuth)) {
    if (checkAuth()) {
      next()
    } else {
      next('/login')
    }
  } else {
    next()
  }
})

在代码中，我们不再使用路由守卫，而是直接在路由配置中使用meta字段来标识需要授权的路由。然后，我们在beforeEach路由守卫中判断该字段是否存在，进而决定是否允许用户继续导航。

三、方案三：组件守卫

简介

组件守卫是一种直接在组件内部进行权限检查的方案，与路由守卫和元信息都不同。

代码实现

import { Router } from 'vue-router'

const router = new Router({
  routes: [
    {
      path: '/private-page',
      component: () => import('./PrivatePage.vue'),
    },
  ],
})

// 在 PrivatePage.vue 中
export default {
  beforeRouteEnter(to, from, next) {
    if (checkAuth()) {
      next()
    } else {
      next('/login')
    }
  },
}