vue axios实现登录源码
时间: 2023-09-01 12:07:21 浏览: 56
以下是一个基于Vue和Axios实现登录的示例代码:
```html
<!-- login.vue -->
<template>
<div>
<h1>登录</h1>
<form @submit.prevent="login">
<label for="username">用户名:</label>
<input type="text" id="username" v-model="form.username" required>
<br>
<label for="password">密码:</label>
<input type="password" id="password" v-model="form.password" required>
<br>
<button type="submit">登录</button>
</form>
<p v-if="error">{{ error }}</p>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
form: {
username: '',
password: ''
},
error: ''
}
},
methods: {
async login() {
try {
const response = await axios.post('/api/login', this.form)
// 登录成功,保存token到本地存储
localStorage.setItem('token', response.data.token)
// 跳转到首页
this.$router.push('/')
} catch (error) {
this.error = error.response.data.error
}
}
}
}
</script>
```
在上述代码中,我们使用了Axios库来发送POST请求并将表单数据传递给服务器。如果登录成功,服务器将返回一个JWT令牌。我们将令牌保存在本地存储中,以便在其他页面中进行身份验证。如果登录失败,我们将错误消息显示在页面上。
需要注意的是,我们使用了async/await语法来处理异步请求,这意味着我们可以使用try/catch块来捕获请求失败的错误。如果请求成功,我们将跳转到首页(这里假设首页路径为'/')。