Vue 实现登录注册

Vue 实现登录注册功能

项目初始化

使用 Vue CLI 创建项目：

vue create auth-demo
cd auth-demo
npm install axios vue-router 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'
import Dashboard from '../views/Dashboard.vue'

Vue.use(Router)

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

// 路由守卫
router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('token')
  if (to.matched.some(record => record.meta.requiresAuth) && !isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})

export default router

状态管理

在 src/store/index.js 中设置 Vuex 存储：

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    user: null,
    token: localStorage.getItem('token') || null
  },
  mutations: {
    setUser(state, user) {
      state.user = user
    },
    setToken(state, token) {
      state.token = token
      localStorage.setItem('token', token)
    },
    clearAuthData(state) {
      state.user = null
      state.token = null
      localStorage.removeItem('token')
    }
  },
  actions: {
    login({ commit }, authData) {
      return new Promise((resolve, reject) => {
        // 这里替换为实际API调用
        setTimeout(() => {
          commit('setUser', { email: authData.email })
          commit('setToken', 'demo-token')
          resolve()
        }, 500)
      })
    },
    register({ commit }, authData) {
      // 类似登录处理
    },
    logout({ commit }) {
      commit('clearAuthData')
    }
  },
  getters: {
    isAuthenticated: state => !!state.token
  }
})

登录组件

src/views/Login.vue 示例：

<template>
  <div class="login">
    <h2>Login</h2>
    <form @submit.prevent="login">
      <input v-model="email" type="email" placeholder="Email" required>
      <input v-model="password" type="password" placeholder="Password" required>
      <button type="submit">Login</button>
    </form>
    <p>Don't have an account? <router-link to="/register">Register</router-link></p>
  </div>
</template>

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

注册组件

src/views/Register.vue 类似结构：

<template>
  <div class="register">
    <h2>Register</h2>
    <form @submit.prevent="register">
      <input v-model="email" type="email" placeholder="Email" required>
      <input v-model="password" type="password" placeholder="Password" required>
      <input v-model="confirmPassword" type="password" placeholder="Confirm Password" required>
      <button type="submit">Register</button>
    </form>
    <p>Already have an account? <router-link to="/login">Login</router-link></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      password: '',
      confirmPassword: ''
    }
  },
  methods: {
    register() {
      if (this.password !== this.confirmPassword) {
        alert("Passwords don't match!")
        return
      }
      this.$store.dispatch('register', {
        email: this.email,
        password: this.password
      }).then(() => {
        this.$router.push('/dashboard')
      }).catch(err => {
        console.error(err)
      })
    }
  }
}
</script>

实际API集成

替换模拟登录代码为真实API调用：

// 在store actions中
login({ commit }, authData) {
  return axios.post('/api/auth/login', {
    email: authData.email,
    password: authData.password
  }).then(res => {
    commit('setUser', res.data.user)
    commit('setToken', res.data.token)
  })
}

安全增强

1. 使用 HTTPS 传输
2. 密码加密处理（如 bcrypt）
3. 添加表单验证
4. 实现 CSRF 防护
5. 设置 token 过期时间

样式优化

添加基础样式增强用户体验：

.login, .register {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
}

input {
  display: block;
  width: 100%;
  margin: 10px 0;
  padding: 8px;
}

button {
  background: #42b983;
  color: white;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
}