当前位置：首页 > VUE

vue实现登录跳转

2026-02-20 11:19:29VUE

实现登录跳转的基本流程

在Vue中实现登录跳转通常涉及路由守卫、状态管理和接口请求。以下是具体实现方法：

创建登录页面组件

新建一个Login.vue组件，包含表单和提交逻辑：

<template>
  <form @submit.prevent="handleLogin">
    <input v-model="username" placeholder="用户名"/>
    <input v-model="password" type="password" placeholder="密码"/>
    <button type="submit">登录</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    async handleLogin() {
      try {
        const response = await axios.post('/api/login', {
          username: this.username,
          password: this.password
        })
        localStorage.setItem('token', response.data.token)
        this.$router.push('/dashboard')
      } catch (error) {
        console.error('登录失败', error)
      }
    }
  }
}
</script>

配置路由守卫

在router/index.js中添加全局前置守卫：

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

Vue.use(Router)

const router = new Router({
  routes: [
    { path: '/login', component: Login },
    { path: '/dashboard', component: Dashboard, 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

状态管理集成

在Vuex中管理用户状态（store/modules/auth.js）：

const state = {
  user: null,
  token: localStorage.getItem('token') || null
}

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

const actions = {
  async login({ commit }, credentials) {
    const response = await axios.post('/api/login', credentials)
    commit('SET_TOKEN', response.data.token)
    commit('SET_USER', response.data.user)
    return response.data
  }
}

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

登录后跳转处理

在登录组件中调用Vuex action：

methods: {
  async handleLogin() {
    try {
      await this.$store.dispatch('auth/login', {
        username: this.username,
        password: this.password
      })
      const redirectPath = this.$route.query.redirect || '/dashboard'
      this.$router.push(redirectPath)
    } catch (error) {
      this.error = '登录失败，请检查凭证'
    }
  }
}

响应拦截处理

在axios拦截器中添加401处理：

vue实现登录跳转

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