当前位置：首页 > VUE

vue实现登录拦截

2026-03-28 05:33:38VUE

路由拦截实现登录验证

在 Vue 项目中，可以通过路由守卫（navigation guards）实现登录拦截。以下是具体实现方式：

安装 Vue Router
```
npm install vue-router
```

配置路由守卫 在 router/index.js 中配置全局前置守卫：


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

Vue.use(Router)

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

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

if (to.matched.some(record => record.meta.requiresAuth)) { if (!isAuthenticated) { next('/login') } else { next() } } else { next() } })

export default router


### 登录状态管理

结合 Vuex 实现更完善的登录状态管理：

1. 创建 auth 模块
```javascript
// store/modules/auth.js
const state = {
  token: localStorage.getItem('token') || '',
  user: null
}

const mutations = {
  SET_TOKEN(state, token) {
    state.token = token
    localStorage.setItem('token', token)
  },
  CLEAR_AUTH(state) {
    state.token = ''
    state.user = null
    localStorage.removeItem('token')
  }
}

const actions = {
  login({ commit }, credentials) {
    return api.login(credentials).then(response => {
      commit('SET_TOKEN', response.data.token)
    })
  },
  logout({ commit }) {
    commit('CLEAR_AUTH')
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

响应拦截处理

在 axios 拦截器中处理未授权情况：

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

const instance = axios.create({
  baseURL: process.env.VUE_APP_API_URL
})

instance.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      store.dispatch('auth/logout')
      router.push('/login')
    }
    return Promise.reject(error)
  }
)

export default instance

组件级权限控制

在组件中使用计算属性控制显示：

<template>
  <div v-if="isAuthenticated">
    <!-- 受保护内容 -->
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState('auth', ['token']),
    isAuthenticated() {
      return !!this.token
    }
  }
}
</script>

动态路由加载

根据权限动态加载路由：

vue实现登录拦截

// router/index.js
function loadRoutes() {
  const basicRoutes = [
    { path: '/login', component: Login }
  ]

  if (store.state.auth.token) {
    return [
      ...basicRoutes,
      { path: '/dashboard', component: Dashboard, meta: { requiresAuth: true } }
    ]
  }
  return basicRoutes
}

const router = new Router({
  routes: loadRoutes()
})

标签: vue