vue路由实现登录注册

Vue路由实现登录注册功能

路由配置

在Vue项目中，通过vue-router配置登录和注册的路由。通常将这些路由设置为公开可访问，不要求认证。

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

Vue.use(Router)

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

导航守卫

使用路由守卫保护需要认证的页面，未登录用户尝试访问受保护路由时重定向到登录页。

// 添加全局前置守卫
router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('token')

  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!isAuthenticated) {
      next({ name: 'Login' })
    } else {
      next()
    }
  } else {
    next()
  }
})

登录组件实现

创建登录表单组件，处理用户提交的凭证。

<!-- views/Login.vue -->
<template>
  <div>
    <form @submit.prevent="handleLogin">
      <input v-model="email" type="email" placeholder="Email" required>
      <input v-model="password" type="password" placeholder="Password" required>
      <button type="submit">Login</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      password: ''
    }
  },
  methods: {
    async handleLogin() {
      try {
        const response = await authService.login(this.email, this.password)
        localStorage.setItem('token', response.data.token)
        this.$router.push({ name: 'Dashboard' })
      } catch (error) {
        console.error('Login failed:', error)
      }
    }
  }
}
</script>

注册组件实现

创建用户注册表单组件。

<!-- views/Register.vue -->
<template>
  <div>
    <form @submit.prevent="handleRegister">
      <input v-model="name" type="text" placeholder="Name" required>
      <input v-model="email" type="email" placeholder="Email" required>
      <input v-model="password" type="password" placeholder="Password" required>
      <button type="submit">Register</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      email: '',
      password: ''
    }
  },
  methods: {
    async handleRegister() {
      try {
        await authService.register(this.name, this.email, this.password)
        this.$router.push({ name: 'Login' })
      } catch (error) {
        console.error('Registration failed:', error)
      }
    }
  }
}
</script>

认证服务

创建独立的认证服务模块处理API调用。

// services/auth.js
import axios from 'axios'

const API_URL = 'https://your-api-endpoint.com'

export default {
  login(email, password) {
    return axios.post(`${API_URL}/login`, { email, password })
  },
  register(name, email, password) {
    return axios.post(`${API_URL}/register`, { name, email, password })
  }
}

用户状态管理

对于更复杂的应用，建议使用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 = {
  login({ commit }, credentials) {
    return authService.login(credentials.email, credentials.password)
      .then(response => {
        commit('SET_TOKEN', response.data.token)
        return response
      })
  },
  register({ commit }, userData) {
    return authService.register(userData.name, userData.email, userData.password)
  }
}

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

响应式导航

根据认证状态动态显示/隐藏导航菜单项。

<!-- components/Navbar.vue -->
<template>
  <nav>
    <router-link to="/login" v-if="!isAuthenticated">Login</router-link>
    <router-link to="/register" v-if="!isAuthenticated">Register</router-link>
    <button @click="logout" v-if="isAuthenticated">Logout</button>
  </nav>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState('auth', ['token']),
    isAuthenticated() {
      return !!this.token
    }
  },
  methods: {
    ...mapActions('auth', ['logout'])
  }
}
</script>