前端如何检验登录状态

前端检验登录状态的方式有：使用Token验证、Cookie验证、Session验证。这些方法各有优缺点，最常见且安全性较高的是Token验证。Token验证通常使用JWT（JSON Web Token）来进行，它不仅简化了前后端分离的认证流程，还能有效防止CSRF（跨站请求伪造）攻击。下面我们详细介绍这几种方法及其实现方式。

一、使用Token验证

1、Token生成与存储

在用户成功登录后，服务器会生成一个Token，这个Token通常包含用户的身份信息和有效期等内容，并采用加密算法进行签名。生成的Token会返回给客户端，客户端需将其存储在本地存储（localStorage）或会话存储（sessionStorage）中。

// 假设服务器返回的Token
const token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9";
// 存储Token到localStorage
localStorage.setItem('authToken', token);
// 或者存储到sessionStorage
sessionStorage.setItem('authToken', token);

2、Token验证

每次客户端发起请求时，需要将Token附加到请求头中，服务器在接收到请求后会验证Token的合法性和有效性。以下是一个示例，展示如何在请求头中携带Token。

const token = localStorage.getItem('authToken');
fetch('/api/some-endpoint', {
    method: 'GET',
    headers: {
        'Authorization': `Bearer ${token}`
    }
}).then(response => {
    // 处理响应
});

3、Token过期处理

Token通常会设置一个有效期，当Token过期时，服务器会拒绝请求。客户端在接收到401 Unauthorized状态码时，需引导用户重新登录。以下是一个示例：

fetch('/api/some-endpoint', {
    method: 'GET',
    headers: {
        'Authorization': `Bearer ${token}`
    }
}).then(response => {
    if (response.status === 401) {
        // Token过期，引导用户重新登录
        window.location.href = '/login';
    } else {
        // 处理其他响应
    }
});

二、使用Cookie验证

1、设置Cookie

在用户登录成功后，服务器会生成一个包含用户身份信息的Cookie，并将其发送给客户端。客户端接收到Cookie后，会自动存储在浏览器中。

// 服务器端设置Cookie的示例（Node.js和Express） res.cookie('authToken', token, { httpOnly: true, // 仅通过HTTP请求传递，防止XSS攻击 secure: true, // 仅在HTTPS协议下传递 maxAge: 3600000 // Cookie有效期，单位为毫秒 });

2、Cookie验证

在随后的请求中，浏览器会自动附带Cookie，服务器可以通过读取和验证Cookie来检查用户的登录状态。

// 服务器端验证Cookie的示例（Node.js和Express）
const token = req.cookies.authToken;
if (!token) {
    return res.status(401).send('Unauthorized');
}
// 验证Token合法性
// ...

3、Cookie过期处理

Cookie设置了有效期，当有效期过后，浏览器会自动删除Cookie。服务器在接收到没有有效Cookie的请求时，会返回401 Unauthorized状态码，客户端需引导用户重新登录。

三、使用Session验证

1、Session创建与存储

在用户登录成功后，服务器会为用户创建一个Session，并将Session ID存储在服务器端。服务器会生成一个包含Session ID的Cookie，并发送给客户端。

// 服务器端创建Session的示例（Node.js和Express） req.session.userId = user.id;

2、Session验证

在随后的请求中，浏览器会自动附带包含Session ID的Cookie，服务器可以通过读取和验证Session ID来检查用户的登录状态。

// 服务器端验证Session的示例（Node.js和Express）
if (!req.session.userId) {
    return res.status(401).send('Unauthorized');
}
// 验证Session合法性
// ...

3、Session过期处理

Session通常会设置一个有效期，当Session过期后，服务器会删除对应的Session记录。客户端在接收到401 Unauthorized状态码时，需引导用户重新登录。

四、前端实现登录状态检验的最佳实践

1、使用中间件进行Token验证

在前端项目中，可以使用中间件（middleware）来统一处理Token的存取和验证逻辑。以下是一个示例，展示如何在React项目中使用中间件进行Token验证。

import axios from 'axios';
// 创建Axios实例
const api = axios.create({
    baseURL: '/api'
});
// 添加请求拦截器，在每个请求中附加Token
api.interceptors.request.use(config => {
    const token = localStorage.getItem('authToken');
    if (token) {
        config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
}, error => {
    return Promise.reject(error);
});
// 添加响应拦截器，处理Token过期
api.interceptors.response.use(response => {
    return response;
}, error => {
    if (error.response.status === 401) {
        // Token过期，引导用户重新登录
        window.location.href = '/login';
    }
    return Promise.reject(error);
});
export default api;

2、在路由守卫中检验登录状态

在单页应用（SPA）中，可以在路由守卫中检验用户的登录状态，确保只有登录状态下的用户才能访问特定页面。以下是一个示例，展示如何在Vue项目中使用路由守卫进行登录状态检验。

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home';
import Login from '@/components/Login';
Vue.use(Router);
const router = new Router({
    routes: [
        {
            path: '/',
            name: 'Home',
            component: Home,
            meta: { requiresAuth: true }
        },
        {
            path: '/login',
            name: 'Login',
            component: Login
        }
    ]
});
// 添加导航守卫
router.beforeEach((to, from, next) => {
    const token = localStorage.getItem('authToken');
    if (to.matched.some(record => record.meta.requiresAuth)) {
        if (!token) {
            next({ name: 'Login' });
        } else {
            next();
        }
    } else {
        next();
    }
});
export default router;

五、总结

前端检验登录状态是保证用户安全和体验的重要环节。使用Token验证、Cookie验证、Session验证是常见的三种方式，其中Token验证由于其安全性和灵活性，被广泛应用于前后端分离的项目中。无论采用哪种方式，都需要在设计和实现过程中考虑到安全性、易用性和性能。通过合理的架构和代码设计，可以有效地提升应用的安全性和用户体验。