当前位置：首页 > VUE

vue怎么实现登录拦截

2026-01-22 14:20:03VUE

路由守卫实现登录拦截

在Vue中可以通过vue-router的路由守卫功能实现登录拦截。路由守卫分为全局守卫、路由独享守卫和组件内守卫，登录拦截通常使用全局前置守卫beforeEach。

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import store from '../store'

Vue.use(Router)

const router = new Router({
  routes: [
    // 路由配置
  ]
})

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!store.getters.isLoggedIn) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next()
  }
})

路由配置添加元信息

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

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

状态管理配合

通常需要配合Vuex状态管理来存储和检查登录状态：

vue怎么实现登录拦截

// store/index.js
export default new Vuex.Store({
  state: {
    token: null,
    user: null
  },
  getters: {
    isLoggedIn: state => !!state.token
  },
  mutations: {
    setUser(state, user) {
      state.user = user
    },
    setToken(state, token) {
      state.token = token
    }
  }
})

登录逻辑实现

在登录组件中处理登录成功后保存凭证并跳转：

methods: {
  login() {
    axios.post('/api/login', this.credentials)
      .then(response => {
        this.$store.commit('setToken', response.data.token)
        this.$store.commit('setUser', response.data.user)

        const redirect = this.$route.query.redirect || '/'
        this.$router.push(redirect)
      })
  }
}

响应拦截处理

可以在axios拦截器中统一处理未授权情况：

vue怎么实现登录拦截

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

本地存储持久化

为了保持登录状态，可以将token存入本地存储：

// 登录成功后
localStorage.setItem('token', token)

// 初始化时检查
if (localStorage.getItem('token')) {
  store.commit('setToken', localStorage.getItem('token'))
}

退出登录处理

退出登录时需要清除所有认证信息：

methods: {
  logout() {
    this.$store.commit('setToken', null)
    this.$store.commit('setUser', null)
    localStorage.removeItem('token')
    this.$router.push('/login')
  }
}

标签: vue