在一个基于Vue的web应用中，获取当前登录用户通常涉及到前端和后端的配合。前端需要将用户信息从后端获取并展示在页面上。下面我将以一个简单的例子来介绍如何在Vue应用中获取当前登录用户。

### 流程步骤

步骤 | 操作
---|---
1 | 前端发送请求给后端，获取当前登录用户信息
2 | 后端验证用户身份并返回用户信息给前端
3 | 前端接收后端返回的用户信息并展示在页面上

### 具体操作步骤

#### 前端

首先，在`vue.config.js`中配置代理，将接口代理到后端接口地址。

```javascript
// vue.config.js

module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000', // 后端接口地址
changeOrigin: true
}
}
}
}
```

然后，在Vue组件中使用axios发送请求给后端来获取当前登录用户信息。

```javascript
// User.vue

import axios from 'axios';

export default {
data() {
return {
currentUser: null
};
},
created() {
this.getCurrentUser();
},
methods: {
async getCurrentUser() {
try {
const response = await axios.get('/api/user');
this.currentUser = response.data;
} catch (error) {
console.error(error);
}
}
}
}
```

#### 后端

在后端接口中，需要验证用户的登录状态，并返回用户信息给前端。

```javascript
// server.js

app.get('/api/user', (req, res) => {
if (req.isAuthenticated()) { // 使用passport验证用户的登录状态
res.json({ user: req.user }); // 返回用户信息给前端
} else {
res.status(401).json({ message: '用户未登录' });
}
});
```

在这个例子中，我们假设后端使用了passport来验证用户的登录状态，`req.isAuthenticated()`用于检查用户是否已经通过登录认证，`req.user`包含当前登录用户的信息。

最后，在Vue组件中展示当前登录用户的信息。

```html

```

### 总结

以上就是在Vue应用中获取当前登录用户的简单流程。通过合作前后端实现数据的共享，前端可以获取后端返回的用户信息并展示在页面上。在实际项目中，可能还会有更多复杂的流程和逻辑，但基本原理是相似的。希望这篇文章能够帮助到你理解如何在Vue应用中获取当前登录用户的信息。如果有任何疑问，欢迎留言交流。