js登录成功后显示用户信息
时间: 2023-09-10 10:09:18 浏览: 232
好的,如果用户在登录成功后需要显示用户信息,可以通过 JavaScript 实现。具体实现方式如下:
1. 在登录成功后,后端返回用户信息,例如用户名、头像等。
2. 在前端页面中,添加一个用于显示用户信息的 div 元素,例如:
```html
<div id="user-info"></div>
```
3. 在 JavaScript 中,获取用户信息,并将其显示在 div 元素中。例如:
```javascript
// 获取用户信息
fetch('/user/info')
.then(response => response.json())
.then(data => {
// 将用户信息显示在 div 元素中
const userInfoDiv = document.getElementById('user-info');
userInfoDiv.innerHTML = `Welcome, ${data.username}! <img src="${data.avatar}" alt="avatar">`;
});
```
在上面的代码中,我们使用了 fetch 函数来获取用户信息,该函数返回一个 Promise 对象。在 Promise 对象的回调函数中,我们将用户信息显示在 div 元素中。需要注意的是,我们在用户信息中包含了一个头像,用于显示用户的头像。
需要注意的是,如果用户未登录,后端应该返回一个错误状态码,例如 401,表示未授权。在 JavaScript 中,我们可以通过检查状态码来判断用户是否已登录,例如:
```javascript
fetch('/user/info')
.then(response => {
if (response.status === 401) {
// 用户未登录,重定向到登录页面
window.location.href = '/login';
} else {
return response.json();
}
})
.then(data => {
// 将用户信息显示在 div 元素中
const userInfoDiv = document.getElementById('user-info');
userInfoDiv.innerHTML = `Welcome, ${data.username}! <img src="${data.avatar}" alt="avatar">`;
});
```
在上面的代码中,我们检查了状态码,如果状态码为 401,则表示用户未登录,我们将页面重定向到登录页面;否则,我们继续获取用户信息并显示在页面中。