vue-router 控制路由权限的实现

Vue Router 控制路由权限的实现通常有以下几个步骤：

1. 定义路由表

首先，需要定义一个路由表，包含所有的路由信息。路由表可以通过 Vue Router 的 `routes` 配置项来定义。

const router = new VueRouter({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      meta: {
        requiresAuth: true // 添加 requiresAuth 元信息
      }
    },
    {
      path: '/login',
      name: 'login',
      component: Login
    },
    {
      path: '/dashboard',
      name: 'dashboard',
      component: Dashboard,
      meta: {
        requiresAuth: true // 添加 requiresAuth 元信息
      }
    }
  ]
})

在上面的路由表中，我们定义了三个路由：`home`、`login` 和 `dashboard`。其中 `home` 和 `dashboard` 路由都添加了 `requiresAuth` 元信息，表示需要登录才能访问。

2. 检查路由元信息

接下来，可以通过 Vue Router 提供的 `beforeEach` 钩子函数来检查路由元信息。在这个钩子函数中，可以判断当前路由是否需要登录，如果需要登录而用户未登录，则重定向到登录界面。

router.beforeEach((to, from, next) => {
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
  const isAuthenticated = localStorage.getItem('token') // 检查用户是否已登录
  if (requiresAuth && !isAuthenticated) {
    next('/login') // 未登录，跳转到登录界面
  } else {
    next() // 已登录或不需要登录，放行
  }
})

在上面的代码中，我们通过 `to.matched.some` 方法判断当前路由是否需要登录。如果需要登录且用户未登录，则通过 `next('/login')` 方法重定向到登录界面。否则，通过 `next()` 方法放行。

3. 登录验证

最后，需要在登录成功后将用户信息保存下来，例如存储在本地存储中，以便在路由权限控制时使用。

// 登录
login() {
  // 登录成功后将 token 存储到本地存储中
  localStorage.setItem('token', token)
  this.$router.push('/dashboard') // 跳转到首页
}

以上就是 Vue Router 控制路由权限的实现步骤。通过这种方式，可以实现简单的路由权限控制，保障应用程序的安全性。