vue登录后获取用户信息
时间: 2023-09-06 13:07:06 浏览: 43
在Vue中,获取用户信息通常是通过向后端发送请求来获取。以下是一个简单的示例:
首先,在登录成功后,后端会返回一个包含用户信息的token,我们需要将其保存在本地,可以使用localStorage或vuex等方式。
在Vue中,我们可以在组件的created生命周期钩子中发送请求以获取用户信息,并将其保存在组件的data中。
例如:
```javascript
<template>
<div>
<h1>用户信息</h1>
<p>用户名:{{userInfo.username}}</p>
<p>邮箱:{{userInfo.email}}</p>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
userInfo: {}
}
},
created() {
// 发送请求以获取用户信息
axios.get('/api/userInfo').then(res => {
this.userInfo = res.data
}).catch(err => {
console.log(err)
})
}
}
</script>
```
在上面的代码中,我们使用axios发送了一个GET请求,请求地址为`/api/userInfo`,后端应该提供对应的接口来返回当前登录用户的信息。通过then方法获取到响应后,将响应数据保存在组件的data中,即可在页面中展示用户信息。
当然,以上只是一个简单的示例,实际情况可能会更复杂,需要根据具体业务需求来设计获取用户信息的方式。