vue怎么实现登录拦截

实现登录拦截的方法

在Vue中实现登录拦截通常涉及路由守卫（Navigation Guards）的使用，结合用户认证状态检查。以下是具体实现方式：

使用路由守卫

在Vue Router中配置全局前置守卫，检查目标路由是否需要认证：

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

Vue.use(Router)

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

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()
  }
})

认证状态管理

在Vuex store中维护用户认证状态：

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

登录流程处理

在登录组件中处理认证成功后跳转：

// Login.vue
methods: {
  async login() {
    try {
      const response = await authService.login(this.credentials)
      this.$store.commit('setUser', response.data)
      const redirect = this.$route.query.redirect || '/'
      this.$router.push(redirect)
    } catch (error) {
      // 处理错误
    }
  }
}

路由元信息配置

为需要保护的路由添加元信息：

const routes = [
  {
    path: '/profile',
    component: UserProfile,
    meta: { requiresAuth: true }
  }
]

响应拦截处理

在axios拦截器中处理401未授权响应：

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

退出登录处理

清除认证状态并重定向：

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

这种方法组合了前端路由守卫和状态管理，确保未认证用户无法访问受保护路由，同时提供流畅的用户体验。