vue2 登录功能 如何写代码
时间: 2023-05-22 11:05:02 浏览: 47
为了实现Vue2的登录功能,你需要使用Vue-router和Vuex来存储用户信息,以及使用axios进行API请求。
首先,你需要创建Vue组件来展示登录表单,包括输入字段和提交按钮。
然后,你需要在Vue-router中定义一个路由来访问这个登录组件。
接着,你需要在Vuex store中创建一个模块来存储用户信息,包括用户名和token。
最后,你需要使用axios发送POST请求到后端API,通过验证用户输入表单信息并使用jsonwebtoken生成一个token。成功登录后,将token和用户名存储在Vuex store中。
下面是一些示例代码:
// Login.vue组件
<template>
<form @submit.prevent="handleSubmit">
<input type="text" v-model="username">
<input type="password" v-model="password">
<button type="submit">登录</button>
</form>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
handleSubmit() {
this.$store.dispatch('login', {
username: this.username,
password: this.password
})
}
}
}
</script>
// router.js
import Login from './Login.vue'
const router = new VueRouter({
routes: [
{
path: '/login',
component: Login
}
]
})
export default router
// store.js
import axios from 'axios'
const state = {
user: {
username: '',
token: ''
}
}
const mutations = {
setUser(state, user) {
state.user = user
}
}
const actions = {
async login({ commit }, { username, password }) {
const response = await axios.post('/api/login', { username, password })
const { token } = response.data
commit('setUser', { username, token })
}
}
export default new Vuex.Store({
state,
mutations,
actions
})