当前位置：首页 > VUE

vue实现拦截登录

2026-03-07 21:15:23VUE

Vue 实现拦截登录的方法

在 Vue 项目中，拦截登录通常用于实现路由守卫、权限控制或全局登录状态管理。以下是几种常见的实现方式：

使用 Vue Router 的路由守卫

通过 Vue Router 的全局前置守卫 beforeEach，可以在路由跳转前检查用户是否已登录：

// router/index.js
import router from './router'

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('token')
  if (to.matched.some(record => record.meta.requiresAuth) && !isAuthenticated) {
    next({ path: '/login' })
  } else {
    next()
  }
})

封装 Axios 请求拦截器

通过 Axios 的请求拦截器，可以在每次请求前检查用户登录状态：

// utils/request.js
import axios from 'axios'

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000
})

service.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token')
    if (token) {
      config.headers['Authorization'] = 'Bearer ' + token
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

使用 Vuex 管理登录状态

通过 Vuex 集中管理登录状态，并在组件中通过计算属性获取：

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

const mutations = {
  SET_TOKEN: (state, token) => {
    state.token = token
    localStorage.setItem('token', token)
  }
}

全局混入登录检查

通过 Vue 的全局混入功能，在组件创建时检查登录状态：

// main.js
Vue.mixin({
  created() {
    if (!this.$store.state.user.token && this.$route.meta.requiresAuth) {
      this.$router.push('/login')
    }
  }
})

组合式 API 实现

在 Vue 3 中，可以使用组合式 API 封装登录检查逻辑：

vue实现拦截登录

// composables/useAuth.js
import { computed } from 'vue'
import { useStore } from 'vuex'

export function useAuth() {
  const store = useStore()
  const isAuthenticated = computed(() => !!store.state.user.token)

  return {
    isAuthenticated
  }
}

这些方法可以单独使用，也可以组合使用以实现更完善的登录拦截机制。根据项目需求选择合适的实现方式，通常建议结合路由守卫和状态管理来实现完整的登录拦截功能。

标签: vue