笔记之vue实现登录与注册功能

以下是一个基本的 Vue 登录注册业务的实现，使用了 Vue Router 和 VueX：

1. 首先创建一个 Vue 项目并安装相关依赖：

vue create my-project
cd my-project
npm install vue-router vuex axios

2. 在 src 目录下新建以下文件：

- `api.js`：定义与后端交互的 API 接口方法；
- `components/Login.vue`：登录页面组件；
- `components/Register.vue`：注册页面组件；
- `components/Welcome.vue`：欢迎页面组件；
- `router/index.js`：定义路由配置；
- `store/index.js`：定义全局状态管理器。

3. 在 `api.js` 中定义与后端交互的 API 接口方法：

import axios from 'axios'
const API_URL = 'http://localhost:3000/api'
export default {
  login (credentials) {
    return axios.post(`${API_URL}/login`, credentials)
  },
  register (userData) {
    return axios.post(`${API_URL}/register`, userData)
  },
  getProfile () {
    return axios.get(`${API_URL}/profile`)
  },
  logout () {
    return axios.post(`${API_URL}/logout`)
  }
}

4. 在 `components/Login.vue` 中实现登录页面：

<template>
  <div>
    <h2>Login</h2>
    <form @submit.prevent="login">
      <label>
        Email:
        <input type="email" v-model="email" required />
      </label>
      <label>
        Password:
        <input type="password" v-model="password" required />
      </label>
      <button type="submit">Login</button>
    </form>
    <div v-if="error">{{ error }}</div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      email: '',
      password: '',
      error: ''
    }
  },
  methods: {
    async login () {
      try {
        await this.$store.dispatch('login', {
          email: this.email,
          password: this.password
        })
        this.$router.push('/welcome')
      } catch (error) {
        this.error = error.response.data.message
      }
    }
  }
}
</script>

5. 在 `components/Register.vue` 中实现注册页面：

<template>
  <div>
    <h2>Register</h2>
    <form @submit.prevent="register">
      <label>
        Name:
        <input type="text" v-model="name" required />
      </label>
      <label>
        Email:
        <input type="email" v-model="email" required />
      </label>
      <label>
        Password:
        <input type="password" v-model="password" required />
      </label>
      <button type="submit">Register</button>
    </form>
    <div v-if="error">{{ error }}</div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      name: '',
      email: '',
      password: '',
      error: ''
    }
  },
  methods: {
    async register () {
      try {
        await this.$store.dispatch('register', {
          name: this.name,
          email: this.email,
          password: this.password
        })
        this.$router.push('/welcome')
      } catch (error) {
        this.error = error.response.data.message
      }
    }
  }
}
</script>

6. 在 `components/Welcome.vue` 中实现欢迎页面：

<template>
  <div>
    <h2>Welcome</h2>
    <p>You are logged in as {{ user.name }} ({{ user.email }}).</p >
    <button @click="logout">Logout</button>
  </div>
</template>
<script>
export default {
  computed: {
    user () {
      return this.$store.state.user
    }
  },
  methods: {
    async logout () {
      await this.$store.dispatch('logout')
      this.$router.push('/login')
    }
  }
}
</script>

7. 在 `router/index.js` 中定义路由配置：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/Login.vue'
import Register from '../components/Register.vue'
import Welcome from '../components/Welcome.vue'
Vue.use(VueRouter)
const routes = [
  { path: '/login', component: Login },
  { path: '/register', component: Register },
  { path: '/welcome', component: Welcome, meta: { requiresAuth: true } },
  { path: '/', redirect: '/login' }
]
const router = new VueRouter({
  mode: 'history',
  routes
})
router.beforeEach((to, from, next) => {
  const isAuthenticated = !!localStorage.getItem('token')
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
  if (requiresAuth && !isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})
export default router

8. 在 `store/index.js` 中定义全局状态管理器：

import Vue from 'vue'
import Vuex from 'vuex'
import api from '../api'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    user: null
  },
  mutations: {
    setUser (state, user) {
      state.user = user
    }
  },
  actions: {
    async login ({ commit }, credentials) {
      const response = await api.login(credentials)
      const token = response.data.token
      localStorage.setItem('token', token)
      const user = await api.getProfile()
      commit('setUser', user.data)
    },
    async register ({ commit }, userData) {
      const response = await api.register(userData)
      const token = response.data.token
      localStorage.setItem('token', token)
      const user = await api.getProfile()
      commit('setUser', user.data)
    },
    async logout ({ commit }) {
      await api.logout()
      localStorage.removeItem('token')
      commit('setUser', null)
    }
  }
})

9. 最后在 `App.vue` 中引入 `router-view` 组件：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: 'App'
}
</script>

现在运行 `npm run serve` 启动项目，即可访问 http://localhost:8080 进行登录注册操作。