当前位置：首页 > VUE

vue 登陆拦截实现

2026-02-24 21:32:04VUE

路由守卫实现登录拦截

在Vue项目中，可以通过路由守卫（navigation guards）来实现登录拦截。路由守卫主要分为全局守卫、路由独享守卫和组件内守卫三种方式。

全局前置守卫beforeEach是最常用的登录拦截实现方式。在路由跳转前进行判断，如果用户未登录且目标路由需要认证，则重定向到登录页面。

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/views/Login.vue'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/dashboard',
      name: 'Dashboard',
      component: () => import('@/views/Dashboard.vue'),
      meta: { requiresAuth: true }
    }
  ]
})

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

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

export default router

结合Vuex的状态管理

对于更复杂的应用，可以结合Vuex来管理用户登录状态。在Vuex中存储用户token和认证状态，通过getters提供统一的访问接口。

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

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

更新路由守卫使用Vuex的状态：

vue 登陆拦截实现

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

登录成功后的处理

在登录组件中，成功获取token后需要更新Vuex状态并重定向到之前尝试访问的页面或默认页面。

// views/Login.vue
methods: {
  handleLogin() {
    login(this.form).then(response => {
      this.$store.commit('setToken', response.data.token)

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

404页面处理

对于未匹配的路由，可以配置一个404页面并重定向。这可以防止用户访问不存在的路由时出现空白页面。

// router/index.js
{
  path: '*',
  component: () => import('@/views/NotFound.vue')
}

动态路由权限控制

对于需要根据用户角色动态加载路由的场景，可以在登录后根据用户权限动态添加路由。

vue 登陆拦截实现

// 登录成功后
import { adminRoutes, userRoutes } from './dynamicRoutes'

router.addRoutes(userHasAdminRole ? adminRoutes : userRoutes)

退出登录处理

退出登录时需要清除token和用户信息，并重定向到登录页面。

methods: {
  logout() {
    this.$store.commit('clearToken')
    this.$router.push('/login')
  }
}

防止重复登录

对于已登录用户访问登录页面，可以重定向到首页或其他页面。

router.beforeEach((to, from, next) => {
  if (to.path === '/login' && store.getters.isAuthenticated) {
    next('/')
  }
  // 其他路由守卫逻辑
})

Token过期处理

在请求拦截器中检查token是否过期，如果过期则跳转到登录页面。

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

标签: vue