当前位置：首页 > VUE

vue实现登陆拦截

2026-01-20 14:34:40VUE

路由守卫实现登录拦截

在Vue项目中，可以通过路由守卫（Navigation Guards）实现登录拦截功能。路由守卫分为全局守卫、路由独享守卫和组件内守卫，通常使用全局前置守卫router.beforeEach进行登录验证。

// router/index.js
import router from './router'
import { getToken } from '@/utils/auth' // 假设有获取token的工具函数

router.beforeEach((to, from, next) => {
  const isLogin = getToken() // 检查是否存在token

  if (to.meta.requiresAuth && !isLogin) {
    next({
      path: '/login',
      query: { redirect: to.fullPath } // 记录跳转前的路由
    })
  } else {
    next()
  }
})

路由配置添加元信息

在路由配置中，通过meta字段标记需要登录验证的路由：

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    meta: { requiresAuth: true }
  },
  {
    path: '/login',
    component: Login
  }
]

登录状态管理

建议使用Vuex集中管理登录状态，与路由守卫配合使用：

// store/modules/user.js
const state = {
  token: localStorage.getItem('token') || ''
}

const mutations = {
  SET_TOKEN(state, token) {
    state.token = token
    localStorage.setItem('token', token)
  },
  CLEAR_TOKEN(state) {
    state.token = ''
    localStorage.removeItem('token')
  }
}

登录跳转处理

在登录组件中处理登录成功后的跳转逻辑：

// Login.vue
methods: {
  handleLogin() {
    login(this.form).then(res => {
      this.$store.commit('SET_TOKEN', res.data.token)
      const redirect = this.$route.query.redirect || '/'
      this.$router.push(redirect)
    })
  }
}

白名单配置

对于无需登录的页面（如登录页、404页等），可以配置白名单优化验证逻辑：

const whiteList = ['/login', '/404']

router.beforeEach((to, from, next) => {
  if (whiteList.includes(to.path)) {
    return next()
  }
  // ...其他验证逻辑
})

响应拦截器配合

可以在axios响应拦截器中处理token过期情况：

service.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      store.commit('CLEAR_TOKEN')
      router.push('/login')
    }
    return Promise.reject(error)
  }
)

vue实现登陆拦截