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

Vue-Router 可以通过路由守卫来实现路由权限的控制。路由守卫就是在路由发生变化时，执行一些自定义的逻辑，例如验证用户是否有权限访问某个页面。

Vue-Router 提供了 3 种路由守卫：全局守卫、路由独享守卫和组件内守卫。

下面是一个简单的路由权限控制的示例：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      meta: { requiresAuth: true } // 需要登录才能访问的页面
    },
    {
      path: '/login',
      name: 'login',
      component: Login
    }
  ]
})

router.beforeEach((to, from, next) => {
  const isLoggedIn = localStorage.getItem('isLoggedIn')
  
  // 如果访问的页面需要登录，但用户没有登录，则跳转到登录页面
  if (to.meta.requiresAuth && !isLoggedIn) {
    next('/login')
  } else {
    next()
  }
})

export default router

在上面的代码中，我们在路由配置中为需要登录才能访问的页面添加了一个 `meta` 属性，并设置了 `requiresAuth` 为 `true`。然后在全局前置守卫中判断如果访问的页面需要登录，但用户没有登录，则跳转到登录页面。

当用户登录成功后，我们可以在登录页中设置一个标志，例如将 `isLoggedIn` 存储到 localStorage 中。这样当用户再次访问需要登录才能访问的页面时，路由守卫就可以判断用户是否已经登录了。