js怎么判断网页登录

JS判断网页登录的方法、通过Cookies和Session、利用JWT、使用第三方认证

要判断用户是否已登录，JavaScript 通常通过 Cookies和Session、利用JWT、使用第三方认证 等方法。以下是如何通过Cookies和Session来实现的详细描述。

一、Cookies和Session

1、设置和获取Cookies

Cookies是存储在用户浏览器中的小型数据文件，通常用于保持用户的登录状态。通过JavaScript，可以轻松地设置和获取Cookies。

设置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;
}

2、使用Session

Session是一种服务器端的存储机制，它可以在服务器上保存用户的信息。在客户端可以通过Cookies保存Session ID，以便服务器识别用户。

示例：

在服务器端，可以使用以下代码创建Session：

// Node.js 示例
const session = require('express-session');
app.use(session({
    secret: 'your_secret_key',
    resave: false,
    saveUninitialized: true,
    cookie: { secure: true }
}));

在客户端，通过Cookies保存Session ID：

document.cookie = "sessionID=" + sessionID + "; path=/";

二、利用JWT（JSON Web Token）

JWT 是一种开放标准（RFC 7519），它定义了一种紧凑且自包含的方式，用于在各方之间以JSON对象传递信息。该信息可以被验证和信任，因为它是数字签名的。

1、生成和解析JWT

生成JWT

const jwt = require('jsonwebtoken');
const token = jwt.sign({ userId: user.id }, 'your_secret_key', { expiresIn: '1h' });

解析JWT

const jwt = require('jsonwebtoken');
const decoded = jwt.verify(token, 'your_secret_key');

2、前端验证JWT

在客户端，可以通过解析JWT来判断用户是否已登录。

function parseJwt(token) {
    var base64Url = token.split('.')[1];
    var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
    var jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
    }).join(''));
    return JSON.parse(jsonPayload);
}
const token = getCookie('jwt_token');
if (token) {
    const userData = parseJwt(token);
    if (userData.exp > Date.now() / 1000) {
        console.log('User is logged in');
    } else {
        console.log('Token expired');
    }
} else {
    console.log('User is not logged in');
}

三、使用第三方认证

第三方认证（如OAuth、OpenID）提供了一种通过第三方服务（如Google、Facebook）验证用户身份的方式。

1、OAuth

OAuth 是一种开放标准，允许第三方应用程序在用户授权的前提下，访问用户在某一服务商上存储的私密资源，而不需要将用户的账号密码提供给第三方应用程序。

示例：

通过Google OAuth 2.0进行登录：

<a href="https://accounts.google.com/o/oauth2/auth?client_id=YOUR_CLIENT_ID&redirect_uri=YOUR_REDIRECT_URI&response_type=token&scope=email">Login with Google</a>

在重定向的URI中，可以获取到access token：

const urlParams = new URLSearchParams(window.location.hash.substr(1));
const accessToken = urlParams.get('access_token');
if (accessToken) {
    console.log('User is logged in');
} else {
    console.log('User is not logged in');
}

四、总结

通过Cookies和Session、利用JWT、使用第三方认证等方式，可以有效地判断用户是否已登录。Cookies和Session适用于简单的登录状态管理，而JWT则提供了一种更安全且无状态的认证方式。第三方认证则提供了一种便捷的登录方式，用户无需记住多个账号密码。

在实际项目中，可以根据需求选择合适的方案，并结合研发项目管理系统PingCode和通用项目协作软件Worktile来提升团队协作效率。