当前位置：首页 > VUE

vue实现登录拦截

2026-01-08 05:15:36VUE

实现登录拦截的方法

在Vue项目中，可以通过路由守卫（Navigation Guards）实现登录拦截，确保未登录用户无法访问受保护的路由。以下是具体实现方式：

使用全局前置守卫

在路由配置文件中（通常是router/index.js），添加beforeEach钩子函数进行全局拦截：

import router from './router'
import store from './store'

router.beforeEach((to, from, next) => {
  const isAuthenticated = store.getters.isAuthenticated // 假设使用Vuex存储登录状态

  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!isAuthenticated) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next()
  }
})

配置路由元信息

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

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

处理登录状态

在Vuex store中维护登录状态，通常包含以下内容：

const store = new Vuex.Store({
  state: {
    token: null,
    user: null
  },
  getters: {
    isAuthenticated: state => !!state.token
  },
  mutations: {
    setToken(state, token) {
      state.token = token
    },
    clearToken(state) {
      state.token = null
    }
  }
})

登录成功后跳转

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

methods: {
  async handleLogin() {
    try {
      const response = await loginApi(this.form)
      this.$store.commit('setToken', response.data.token)
      const redirect = this.$route.query.redirect || '/'
      this.$router.push(redirect)
    } catch (error) {
      // 处理错误
    }
  }
}

处理Token过期

可以结合axios拦截器处理token过期情况：

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

可选的白名单配置

对于不需要拦截的公共路由（如登录页、注册页），可以配置白名单：

vue实现登录拦截

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

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

通过以上方法可以实现完整的登录拦截功能，确保未授权用户无法访问受保护的路由。实际应用中可以根据项目需求调整具体实现细节。

标签: vue