vue实现登录验证
时间: 2023-07-27 10:05:53 浏览: 39
Vue 实现登录验证的基本思路是:用户在登录表单中输入用户名和密码,前端将这些信息发送到后端进行验证。后端验证通过后,会返回一个 token,前端将这个 token 存储到本地,之后的每个请求都需要携带这个 token,以便后端进行身份验证。
下面是一个简单的示例:
1. 在登录表单中添加用户名和密码字段,并在 data 中定义对应的变量:
```html
<template>
<form @submit.prevent="login">
<label>用户名:</label>
<input type="text" v-model="username">
<label>密码:</label>
<input type="password" v-model="password">
<button type="submit">登录</button>
</form>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
login() {
// 发送登录请求
}
}
}
</script>
```
2. 在 login 方法中发送登录请求,并将返回的 token 存储到本地:
```javascript
login() {
axios.post('/api/login', {
username: this.username,
password: this.password
})
.then(response => {
localStorage.setItem('token', response.data.token)
// 登录成功,跳转到其他页面
})
.catch(error => {
console.log(error)
})
}
```
3. 在其他需要登录验证的页面中,通过 axios 发送请求时,需要在请求头中添加 Authorization 字段,其值为 Bearer + token:
```javascript
axios.get('/api/userinfo', {
headers: {
Authorization: 'Bearer ' + localStorage.getItem('token')
}
})
.then(response => {
// 获取用户信息成功
})
.catch(error => {
console.log(error)
})
```
4. 后端验证 token 的方法因后端技术不同而异,在这里不再赘述。