当前位置：首页 > VUE

vue如何实现登录拦截

2026-02-22 19:40:55VUE

实现登录拦截的方法

在Vue中实现登录拦截通常通过路由守卫（Navigation Guards）完成，结合全局前置守卫和本地存储（如localStorage）来验证用户登录状态。

使用路由守卫进行拦截

在Vue Router中，可以通过beforeEach方法设置全局前置守卫，检查用户是否已登录。如果未登录，则跳转到登录页面。

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

Vue.use(Router)

const router = new Router({
  routes: [
    { path: '/login', component: Login },
    { path: '/home', component: Home, meta: { requiresAuth: true } }
  ]
})

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

export default router

结合本地存储验证登录状态

用户登录成功后，将token或其他认证信息存储在本地（如localStorage），后续请求时通过该信息判断登录状态。

// 登录成功后存储token
localStorage.setItem('token', 'your-auth-token')

处理HTTP请求拦截

在axios等HTTP请求库中设置请求拦截器，确保每次请求都携带认证信息（如token）。

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

const instance = axios.create({
  baseURL: 'https://api.example.com'
})

instance.interceptors.request.use(config => {
  const token = localStorage.getItem('token')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
}, error => {
  return Promise.reject(error)
})

export default instance

处理未登录的API响应

通过响应拦截器检查API返回的状态码，若发现未授权（如401），则清除本地存储并跳转到登录页。

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

动态路由与权限控制

对于需要更细粒度权限控制的场景，可以通过动态路由和角色验证实现。登录后根据用户角色加载对应的路由配置。

// 根据用户角色动态加载路由
function loadRoutesBasedOnRole(role) {
  const routes = []
  if (role === 'admin') {
    routes.push({ path: '/admin', component: AdminPanel })
  }
  router.addRoutes(routes)
}

通过以上方法，可以实现在Vue应用中对未登录用户的拦截和权限控制。

vue如何实现登录拦截