用vue实现登录注册

安装 Vue 和相关依赖

确保已安装 Node.js 和 npm/yarn。创建一个新的 Vue 项目：

vue create vue-auth-demo

进入项目目录并安装必要依赖：

cd vue-auth-demo
npm install vue-router axios vuex

配置路由

在 src/router/index.js 中设置登录和注册页面的路由：

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

Vue.use(Router)

export default new Router({
  routes: [
    { path: '/login', component: Login },
    { path: '/register', component: Register }
  ]
})

创建登录组件

在 src/views/Login.vue 中实现登录表单：

<template>
  <div>
    <h2>登录</h2>
    <form @submit.prevent="handleLogin">
      <input v-model="email" type="email" placeholder="邮箱" required>
      <input v-model="password" type="password" placeholder="密码" required>
      <button type="submit">登录</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      password: ''
    }
  },
  methods: {
    handleLogin() {
      this.$store.dispatch('login', {
        email: this.email,
        password: this.password
      })
    }
  }
}
</script>

创建注册组件

在 src/views/Register.vue 中实现注册表单：

<template>
  <div>
    <h2>注册</h2>
    <form @submit.prevent="handleRegister">
      <input v-model="email" type="email" placeholder="邮箱" required>
      <input v-model="password" type="password" placeholder="密码" required>
      <button type="submit">注册</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      password: ''
    }
  },
  methods: {
    handleRegister() {
      this.$store.dispatch('register', {
        email: this.email,
        password: this.password
      })
    }
  }
}
</script>

设置 Vuex 状态管理

在 src/store/index.js 中配置认证相关的状态和逻辑：

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    user: null,
    token: localStorage.getItem('token') || null
  },
  mutations: {
    SET_USER(state, user) {
      state.user = user
    },
    SET_TOKEN(state, token) {
      state.token = token
      localStorage.setItem('token', token)
    }
  },
  actions: {
    async login({ commit }, credentials) {
      const response = await axios.post('/api/login', credentials)
      commit('SET_USER', response.data.user)
      commit('SET_TOKEN', response.data.token)
    },
    async register({ commit }, credentials) {
      const response = await axios.post('/api/register', credentials)
      commit('SET_USER', response.data.user)
      commit('SET_TOKEN', response.data.token)
    }
  }
})

配置 axios 拦截器

在 src/main.js 中设置全局的 axios 配置：

import axios from 'axios'
axios.defaults.baseURL = 'http://your-api-url.com'
axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
})

添加导航守卫

在 src/router/index.js 中添加路由守卫保护需要认证的页面：

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

后端 API 示例

一个简单的 Express 登录注册 API 示例：

const express = require('express')
const jwt = require('jsonwebtoken')
const app = express()

app.use(express.json())

const users = []

app.post('/api/register', (req, res) => {
  const { email, password } = req.body
  const user = { email, password }
  users.push(user)
  const token = jwt.sign({ email }, 'secret_key')
  res.json({ user, token })
})

app.post('/api/login', (req, res) => {
  const { email, password } = req.body
  const user = users.find(u => u.email === email && u.password === password)
  if (user) {
    const token = jwt.sign({ email }, 'secret_key')
    res.json({ user, token })
  } else {
    res.status(401).json({ error: 'Invalid credentials' })
  }
})

app.listen(3000, () => console.log('Server running'))