在vue页面中,怎么拿到当前用户的信息
时间: 2024-03-15 19:46:05 浏览: 225
要拿到当前用户的信息,首先需要在前端获取用户的登录状态并进行认证。具体做法可以使用token认证方式,用户在登录成功后,服务端返回一个token给前端,前端将此token存储在本地,之后每次请求服务端时都将此token带上,服务端通过校验token来识别当前用户。
在Vue中,可以使用Vue插件来实现token的设置和获取,如vue-cookie插件。使用该插件可以很方便地设置和获取cookie值,如下所示:
```javascript
// 设置cookie
import VueCookies from 'vue-cookies'
Vue.use(VueCookies)
VueCookies.set('token', token)
// 获取cookie
let token = this.$cookies.get('token')
```
一旦获取到了token,就可以将其携带在请求头中,发送给后端进行认证。后端会验证token的有效性,并返回当前用户的信息。前端可以通过axios等HTTP库发送请求,获取用户信息,如下所示:
```javascript
import axios from 'axios'
let config = {
headers: {
'Authorization': `Bearer ${token}` // 携带token
}
}
axios.get('/user/info', config)
.then(response => {
console.log(response.data)
})
.catch(error => {
console.log(error)
})
```
这样就可以在Vue页面中拿到当前用户的信息了。
阅读全文