vue路由登录实现

Vue路由登录实现方法

在Vue项目中实现路由登录功能，通常需要结合Vue Router和状态管理工具（如Vuex或Pinia）来完成。以下是常见的实现方法：

路由守卫配置

使用Vue Router的全局前置守卫beforeEach来检查用户是否已登录。在路由跳转前进行验证：

// router/index.js
import router from './router'
import store from './store'

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

路由元信息设置

为需要保护的路由添加meta字段，标记需要认证：

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

登录状态管理

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

// store/modules/auth.js
const state = {
  user: null,
  isAuthenticated: false
}

const mutations = {
  SET_USER(state, user) {
    state.user = user
    state.isAuthenticated = !!user
  }
}

const actions = {
  login({ commit }, credentials) {
    return authService.login(credentials).then(user => {
      commit('SET_USER', user)
    })
  },
  logout({ commit }) {
    commit('SET_USER', null)
  }
}

登录表单实现

创建登录组件处理用户认证：

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="email" type="email" placeholder="Email">
    <input v-model="password" type="password" placeholder="Password">
    <button type="submit">Login</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      password: ''
    }
  },
  methods: {
    handleSubmit() {
      this.$store.dispatch('auth/login', {
        email: this.email,
        password: this.password
      }).then(() => {
        this.$router.push('/dashboard')
      })
    }
  }
}
</script>

令牌持久化

使用localStorage或cookie持久化登录状态：

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

// 初始化时检查token
const token = localStorage.getItem('token')
if (token) {
  store.commit('SET_USER', { token })
}

路由动态加载

实现基于权限的动态路由加载：

function loadRoutesBasedOnRole(role) {
  const routes = [...baseRoutes]
  if (role === 'admin') {
    routes.push(...adminRoutes)
  }
  router.addRoutes(routes)
}

错误处理

添加登录失败的错误处理：

handleSubmit() {
  this.$store.dispatch('auth/login', credentials)
    .then(() => this.$router.push('/dashboard'))
    .catch(error => {
      this.error = error.message
    })
}

以上方法组合使用可以实现完整的Vue路由登录功能，包括路由保护、状态管理和用户认证流程。根据项目需求可以选择适合的方案进行组合或扩展。