js怎么获取当前登陆的用户

通过JavaScript获取当前登录用户的方法有很多，包括使用Cookies、LocalStorage、SessionStorage、服务器端验证等。最常用的方式是通过服务器端验证用户身份，并将其信息存储在Cookies或LocalStorage中，然后通过JavaScript获取这些信息。下面将详细介绍如何通过这些方法获取当前登录用户信息。

一、使用Cookies

Cookies是一种在客户端存储数据的方式，通常用于保存用户的登录状态和其他信息。

1. 设置和获取Cookies

在用户登录时，服务器可以将用户信息存储在Cookies中。JavaScript可以通过document.cookie获取这些信息。

// 设置Cookie
document.cookie = "username=JohnDoe";
// 获取Cookie
function getCookie(name) {
    let matches = document.cookie.match(new RegExp(
        "(?:^|; )" + name.replace(/([.$?*|{}()[]\/+^])/g, '\$1') + "=([^;]*)"
    ));
    return matches ? decodeURIComponent(matches[1]) : undefined;
}
let currentUser = getCookie("username");
console.log(currentUser); // JohnDoe

2. Cookie的优缺点

优点：

跨页面共享：Cookies在同一域名下的所有页面之间共享。
持久化：可以设置过期时间，使数据在会话结束后依然存在。

缺点：

安全性：Cookies存储在客户端，容易被篡改。
大小限制：每个Cookie的大小限制为4KB左右。

二、使用LocalStorage

LocalStorage是HTML5提供的一种在客户端保存数据的方法，数据存储在用户的浏览器中，没有过期时间。

1. 设置和获取LocalStorage

在用户登录时，可以将用户信息存储在LocalStorage中。JavaScript可以通过localStorage对象获取这些信息。

// 设置LocalStorage
localStorage.setItem("username", "JohnDoe");
// 获取LocalStorage
let currentUser = localStorage.getItem("username");
console.log(currentUser); // JohnDoe

2. LocalStorage的优缺点

优点：

容量大：LocalStorage的存储容量为5MB左右。
持久性：数据没有过期时间，除非手动删除。

缺点：

安全性：数据存储在客户端，容易被篡改。
跨域限制：数据只能在同一域名下的页面之间共享。

三、使用SessionStorage

SessionStorage也是HTML5提供的一种在客户端保存数据的方法，与LocalStorage不同的是，SessionStorage的数据在页面会话结束时会被清除。

1. 设置和获取SessionStorage

在用户登录时，可以将用户信息存储在SessionStorage中。JavaScript可以通过sessionStorage对象获取这些信息。

// 设置SessionStorage
sessionStorage.setItem("username", "JohnDoe");
// 获取SessionStorage
let currentUser = sessionStorage.getItem("username");
console.log(currentUser); // JohnDoe

2. SessionStorage的优缺点

优点：

安全性：数据在会话结束后会被清除，安全性较高。
容量大：SessionStorage的存储容量为5MB左右。

缺点：

持久性差：数据在会话结束后会被清除。
跨页面限制：数据只能在同一窗口或标签页之间共享。

四、使用服务器端验证

服务器端验证是一种更安全的方法，通过服务器端验证用户身份，然后将用户信息返回给客户端。

1. 使用API获取用户信息

在用户登录时，服务器可以生成一个会话ID或令牌，将其返回给客户端。客户端可以通过这个令牌在后续的请求中获取用户信息。

// 使用Fetch API获取用户信息
fetch('/api/getUserInfo', {
    method: 'GET',
    headers: {
        'Authorization': 'Bearer ' + sessionStorage.getItem('token')
    }
})
.then(response => response.json())
.then(data => {
    console.log(data); // 用户信息
})
.catch(error => {
    console.error('Error:', error);
});

2. 服务器端验证的优缺点

优点：

安全性高：用户信息存储在服务器端，不易被篡改。
灵活性高：可以根据需要返回不同的信息。

缺点：

依赖服务器：需要与服务器进行交互，有一定的延迟。
复杂性高：需要服务器端和客户端的配合。

五、综合使用

在实际应用中，可以综合使用上述方法，以提高安全性和用户体验。例如，可以在用户登录时，将用户信息存储在SessionStorage中，同时在Cookies中存储会话ID或令牌，以便在页面刷新或重新打开时，能够自动登录。

// 登录时设置SessionStorage和Cookie
function loginUser(username, token) {
    sessionStorage.setItem("username", username);
    document.cookie = "token=" + token;
}
// 页面加载时自动登录
function autoLogin() {
    let token = getCookie("token");
    if (token) {
        fetch('/api/getUserInfo', {
            method: 'GET',
            headers: {
                'Authorization': 'Bearer ' + token
            }
        })
        .then(response => response.json())
        .then(data => {
            sessionStorage.setItem("username", data.username);
            console.log(data.username); // 自动登录的用户信息
        })
        .catch(error => {
            console.error('Error:', error);
        });
    }
}
// 调用自动登录函数
autoLogin();

综上所述，通过JavaScript获取当前登录用户的方法有很多，可以根据实际需求选择合适的方法。在实际应用中，通常会结合使用多种方法，以提高安全性和用户体验。