vue如何设置登录拦截器

在 Vue 中设置登录拦截器需要借助路由守卫，具体步骤如下：

1. 在路由配置中定义需要登录才能访问的页面路由，例如：

{
  path: '/dashboard',
  name: 'Dashboard',
  component: Dashboard,
  meta: {
    requiresAuth: true
  }
}

这里通过 `meta` 属性定义了 `requiresAuth` 为 `true`，表示该页面需要登录才能访问。

2. 在路由配置中定义登录页面路由，例如：

{
  path: '/login',
  name: 'Login',
  component: Login
}

3. 在 `router/index.js` 中定义路由守卫，例如：

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(record => record.meta.requiresAuth)` 判断当前页面是否需要登录，通过 `localStorage.getItem('token')` 判断用户是否已登录。

4. 在登录页中处理用户登录逻辑，例如：

methods: {
  login () {
    // 处理登录逻辑
    // 登录成功后将 token 存储到 localStorage 中
    localStorage.setItem('token', 'your_token')
    // 登录成功后跳转到首页
    this.$router.push('/')
  }
}

通过以上步骤，即可完成 Vue 中的登录拦截器设置。