js 怎么自动获取当前登录人

自动获取当前登录用户的方法包括：使用Cookie、Session、Web Storage、或通过API请求获取用户信息。 其中，通过API请求获取用户信息是最常见和安全的方式。我们可以通过后端提供的API接口，获取当前登录用户的详细信息，并在前端进行展示。

详细描述：通过API请求获取用户信息的方法通常是通过在用户登录成功后，后端返回一个认证Token（如JWT），前端将这个Token保存在LocalStorage或SessionStorage中。在需要获取当前用户信息时，前端通过向后端发送带有这个Token的请求来获取用户信息。这个方法的优势在于安全性高，能够有效防止XSS攻击和CSRF攻击。

一、通过Cookie获取当前登录用户

Cookie是浏览器中存储用户信息的一种方式。通过Cookie可以保存用户的登录信息，并在需要时读取这些信息。

// 设置Cookie

function setCookie(name, value, days) {
    var expires = "";
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
// 获取Cookie
function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}
// 删除Cookie
function eraseCookie(name) {
    document.cookie = name + '=; Max-Age=-99999999;';
}
// 使用实例
setCookie('username', 'JohnDoe', 7); // 设置名为username的Cookie，有效期7天
var user = getCookie('username'); // 获取名为username的Cookie
console.log(user); // 输出: JohnDoe

二、通过Session获取当前登录用户

Session是另一种保存用户登录状态的方法。Session通常在服务器端保存，客户端通过Session ID与服务器端进行交互。

// 假设使用Express.js后端框架

const express = require('express');
const session = require('express-session');
const app = express();
app.use(session({
    secret: 'your_secret_key',
    resave: false,
    saveUninitialized: true,
    cookie: { secure: false } // 生产环境应设置为true
}));
app.post('/login', (req, res) => {
    // 假设登录逻辑验证成功
    req.session.user = { username: 'JohnDoe' };
    res.send('Login successful');
});
app.get('/current-user', (req, res) => {
    if (req.session.user) {
        res.json(req.session.user);
    } else {
        res.status(401).send('Unauthorized');
    }
});
app.listen(3000, () => {
    console.log('Server running on port 3000');
});

前端代码：

// 使用Fetch API获取当前用户信息

fetch('/current-user')
    .then(response => {
        if (!response.ok) {
            throw new Error('Unauthorized');
        }
        return response.json();
    })
    .then(user => {
        console.log(user); // 输出: { username: 'JohnDoe' }
    })
    .catch(error => {
        console.error('Error:', error);
    });

三、使用Web Storage（LocalStorage或SessionStorage）保存用户信息

Web Storage是HTML5提供的一种在客户端保存数据的方法。LocalStorage和SessionStorage都是Web Storage的两种类型。

// 设置LocalStorage

localStorage.setItem('username', 'JohnDoe');
// 获取LocalStorage
var user = localStorage.getItem('username');
console.log(user); // 输出: JohnDoe
// 移除LocalStorage
localStorage.removeItem('username');

四、通过API请求获取用户信息

在用户登录后，后端返回一个认证Token，前端将这个Token保存在LocalStorage或SessionStorage中。在需要获取当前用户信息时，前端通过向后端发送带有这个Token的请求来获取用户信息。

后端代码（假设使用Express.js和JWT）：

const express = require('express');

const jwt = require('jsonwebtoken');
const app = express();
const secretKey = 'your_secret_key';
app.post('/login', (req, res) => {
    // 假设登录逻辑验证成功
    const user = { username: 'JohnDoe' };
    const token = jwt.sign(user, secretKey, { expiresIn: '1h' });
    res.json({ token });
});
app.get('/current-user', (req, res) => {
    const token = req.headers['authorization'];
    if (!token) {
        return res.status(401).send('Unauthorized');
    }
    jwt.verify(token, secretKey, (err, user) => {
        if (err) {
            return res.status(403).send('Forbidden');
        }
        res.json(user);
    });
});
app.listen(3000, () => {
    console.log('Server running on port 3000');
});

前端代码：

// 用户登录后保存Token

fetch('/login', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({ username: 'JohnDoe', password: 'password123' })
})
    .then(response => response.json())
    .then(data => {
        localStorage.setItem('token', data.token);
    })
    .catch(error => {
        console.error('Error:', error);
    });
// 获取当前用户信息
const token = localStorage.getItem('token');
fetch('/current-user', {
    headers: {
        'Authorization': token
    }
})
    .then(response => {
        if (!response.ok) {
            throw new Error('Unauthorized');
        }
        return response.json();
    })
    .then(user => {
        console.log(user); // 输出: { username: 'JohnDoe' }
    })
    .catch(error => {
        console.error('Error:', error);
    });

五、总结

通过上述方法，我们可以在JavaScript中自动获取当前登录用户的信息。无论是使用Cookie、Session、Web Storage，还是通过API请求获取用户信息，每种方法都有其优缺点。通过API请求获取用户信息的方法安全性较高，是推荐的实现方式。在实际开发中，可以根据项目需求选择合适的方法来实现用户登录状态的保存和读取。

相关问答FAQs：

1. 如何使用JavaScript自动获取当前登录人的用户名？

问题： 我想在我的网页中显示当前登录人的用户名，该怎么做？

回答： 可以使用JavaScript来获取当前登录人的用户名。首先，你需要在后端设置一个会话(Session)来保存登录人的信息。然后，在前端的JavaScript代码中，你可以通过访问会话中的数据来获取当前登录人的用户名。以下是一个简单的示例代码：

// 获取当前登录人的用户名
var username = sessionStorage.getItem('username');

// 在网页中显示用户名
document.getElementById('username').innerText = username;

在上面的代码中，我们使用了sessionStorage.getItem('username')来获取会话中保存的用户名，并使用document.getElementById('username')来将用户名显示在网页中的一个元素中。

请注意，这只是一个简单的示例，实际实现中需要根据你的具体需求进行适当的修改和调整。

2. 如何使用JavaScript自动获取当前登录人的ID？

问题： 我想在我的网页中获取当前登录人的ID，应该如何实现？

回答： 在JavaScript中获取当前登录人的ID与获取用户名类似，只需要将会话中保存的ID取出即可。以下是一个示例代码：

// 获取当前登录人的ID
var userID = sessionStorage.getItem('userID');

// 在网页中显示ID
document.getElementById('userID').innerText = userID;

上述代码中，我们使用了sessionStorage.getItem('userID')来获取会话中保存的用户ID，并将其显示在网页中的一个元素中。

需要注意的是，这里的userID是一个占位符，你需要根据实际情况修改为你在后端设置的会话变量名。

3. 如何使用JavaScript自动获取当前登录人的角色？

问题： 我想在我的网页中显示当前登录人的角色，应该如何实现？

回答： 要在网页中显示当前登录人的角色，你可以通过JavaScript访问会话中保存的角色信息。以下是一个示例代码：

// 获取当前登录人的角色
var role = sessionStorage.getItem('role');

// 在网页中显示角色
document.getElementById('role').innerText = role;

在上述代码中，我们使用了sessionStorage.getItem('role')来获取会话中保存的角色信息，并将其显示在网页中的一个元素中。

需要注意的是，这里的role是一个占位符，你需要根据实际情况修改为你在后端设置的会话变量名。