当前位置：首页 > VUE

vue如何实现登录跳转

2026-02-21 18:59:18VUE

实现登录跳转的基本流程

在Vue中实现登录跳转通常涉及路由守卫、状态管理和API交互。以下是具体实现方式：

配置路由守卫

在router/index.js中设置全局前置守卫，检查用户是否已登录：

import router from './router'
import store from './store'

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!store.getters.isLoggedIn) {
      next('/login')
    } else {
      next()
    }
  } else {
    next()
  }
})

创建登录组件

在登录组件中处理表单提交和跳转逻辑：

vue如何实现登录跳转

methods: {
  async handleLogin() {
    try {
      await this.$store.dispatch('login', this.form)
      this.$router.push(this.$route.query.redirect || '/dashboard')
    } catch (error) {
      console.error(error)
    }
  }
}

状态管理实现

在Vuex store中定义登录相关状态和操作：

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

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

路由配置示例

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

vue如何实现登录跳转

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

处理Token过期

可以在axios拦截器中检查token有效性：

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

退出登录处理

实现退出功能并清除用户状态：

actions: {
  logout({ commit }) {
    commit('CLEAR_USER')
    commit('CLEAR_TOKEN')
    localStorage.removeItem('token')
    router.push('/login')
  }
}

以上实现方式可以根据具体项目需求进行调整，例如添加记住我功能、第三方登录集成等。核心思路是通过路由守卫控制访问权限，配合状态管理维护用户会话状态。