vue通过路由守卫进行权限控制和登录拦截

        在 Vue 中，可以通过路由守卫进行权限控制和登录拦截。路由守卫是一个函数，当路由变化时会触发该函数，可以在该函数中进行一些操作，如检查用户是否登录、检查用户的权限等。

Vue 提供了三种路由守卫：

1. 全局前置守卫：在每个路由进入前触发，常用于登录拦截和权限控制。
2. 全局解析守卫：在路由被解析前触发，该守卫对于动态路由和嵌套路由非常有用。
3. 全局后置守卫：在每个路由完成后触发，常用于页面统计和动画等。

以下是一个使用全局前置守卫进行登录拦截和权限控制的示例：

const router = new VueRouter({
  routes: [
    {
      path: '/home',
      component: Home,
      meta: { requiresAuth: true } // 设置路由元信息，表示需要登录才能访问
    },
    {
      path: '/login',
      component: Login
    }
  ]
})

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) { // 判断该路由是否需要登录才能访问
    if (!auth.loggedIn()) { // 判断用户是否已经登录
      next({
        path: '/login',
        query: { redirect: to.fullPath } // 记录当前路由，以便登录后自动跳转
      })
    } else {
      next()
    }
  } else {
    next()
  }
})

在上面的代码中，我们先在路由配置中标记了需要登录才能访问的路由（meta: { requiresAuth: true }），然后在全局前置守卫中进行登录状态的检查。如果用户未登录，则跳转到登录页面，并记录当前路由，以便登录后自动跳转。如果用户已登录，则继续访问该路由。

以上是通过全局前置守卫进行登录拦截和权限控制的示例，大家可以根据自己的需求进行相应的修改和扩展。