当前位置：首页 > VUE

vue实现拦截登录

2026-03-28 07:25:06VUE

Vue 实现登录拦截的方法

在 Vue 中实现登录拦截通常涉及路由守卫和全局状态管理。以下是几种常见的方法：

使用路由守卫进行拦截

在 Vue Router 中可以通过 beforeEach 全局前置守卫实现登录拦截：

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('token')

  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})

在路由配置中添加元信息标记需要认证的路由：

vue实现拦截登录

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

结合 Vuex 状态管理

使用 Vuex 存储登录状态可以更灵活地管理认证：

// store.js
state: {
  isLoggedIn: false,
  user: null
},
mutations: {
  setUser(state, user) {
    state.user = user
    state.isLoggedIn = !!user
  }
}

在路由守卫中检查 Vuex 状态：

vue实现拦截登录

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !store.state.isLoggedIn) {
    next('/login')
  } else {
    next()
  }
})

实现 HTTP 拦截器

在 axios 拦截器中检查认证状态：

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

处理登录状态持久化

结合 localStorage 实现登录状态持久化：

// 登录成功后
localStorage.setItem('token', response.data.token)
store.commit('setUser', response.data.user)

在应用初始化时恢复登录状态：

const token = localStorage.getItem('token')
if (token) {
  axios.defaults.headers.common['Authorization'] = `Bearer ${token}`
  store.dispatch('fetchUser') // 获取用户信息
}

这些方法可以单独使用，也可以组合使用以实现更完善的登录拦截机制。根据项目需求选择合适的方式或组合多种方法。

标签: vue