
笔记之vue实现登录与注册功能
else {next()})state: {user: null},},actions: {},},})<template></div><script></script>现在运行 `npm run serve` 启动项目,即可访问 http://localhost:8080 进行登录注册操作。
·
以下是一个基本的 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 进行登录注册操作。
更多推荐
所有评论(0)