当前位置：首页 > VUE

vue router实现登录

2026-01-15 05:25:19VUE

vue router实现登录的基本流程

在Vue项目中实现登录功能通常需要结合Vue Router的路由守卫和状态管理。以下是实现登录验证的典型方案：

创建登录状态管理

使用Vuex或Pinia管理用户登录状态：

// store/auth.js (Vuex示例)
state: {
  isAuthenticated: false,
  user: null
},
mutations: {
  SET_AUTH(state, payload) {
    state.isAuthenticated = payload
  },
  SET_USER(state, payload) {
    state.user = payload
  }
},
actions: {
  login({ commit }, credentials) {
    return authService.login(credentials).then(user => {
      commit('SET_AUTH', true)
      commit('SET_USER', user)
    })
  },
  logout({ commit }) {
    commit('SET_AUTH', false)
    commit('SET_USER', null)
  }
}

配置路由守卫

在路由配置中添加全局前置守卫：

// router/index.js
router.beforeEach((to, from, next) => {
  const isAuthenticated = store.state.auth.isAuthenticated
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth)

  if (requiresAuth && !isAuthenticated) {
    next('/login')
  } else if (to.path === '/login' && isAuthenticated) {
    next('/')
  } else {
    next()
  }
})

定义路由元信息

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

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

实现登录组件

创建登录表单组件处理认证：

// Login.vue
methods: {
  handleSubmit() {
    this.$store.dispatch('auth/login', this.credentials)
      .then(() => {
        this.$router.push(this.$route.query.redirect || '/')
      })
      .catch(error => {
        // 处理错误
      })
  }
}

处理Token持久化

通常需要将认证token存储在本地：

// 登录成功后
localStorage.setItem('authToken', response.data.token)

// 应用初始化时检查token
if (localStorage.getItem('authToken')) {
  store.dispatch('auth/checkAuth')
}

实现登出功能

清除认证状态和本地存储：

// Logout.vue
methods: {
  logout() {
    this.$store.dispatch('auth/logout')
    localStorage.removeItem('authToken')
    this.$router.push('/login')
  }
}

处理HTTP拦截器

在axios拦截器中添加token：

vue router实现登录

axios.interceptors.request.use(config => {
  const token = localStorage.getItem('authToken')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
})

以上实现方案可以根据具体项目需求进行调整，例如添加角色权限控制、多因素认证等功能。