token 和 cookie 还在傻傻分不清？

token 概念和作用

Token是一种用于身份验证和授权的令牌。在Web应用程序中，当用户进行登录或授权时，服务器会生成一个Token并将其发送给客户端。客户端在后续的请求中将Token作为身份凭证携带，以证明自己的身份。

Token可以是一个字符串，通常是经过加密和签名的，以确保其安全性和完整性。服务器收到Token后，会对其进行解析和验证，以验证用户的身份并授权对特定资源的访问权限。

Token的使用具有以下特点：

• 
  
• 无状态：服务器不需要在数据库中存储会话信息，所有必要的信息都包含在Token中。
  
• 可扩展性：Token可以存储更多的用户信息，甚至可以包含自定义的数据。
  
• 安全性：Token可以使用加密算法进行签名，以确保数据的完整性和安全性。
  
• 跨域支持：Token可以在跨域请求中通过在请求头中添加Authorization字段进行传递。
  

Token在前后端分离的架构中广泛应用，特别是在RESTful API的身份验证中常见。它比传统的基于Cookie的会话管理更灵活，并且适用于各种不同的客户端，例如Web、移动应用和第三方接入等。

cookie 和 token 的关系

Cookie和Token是两种不同的概念，但它们在身份验证和授权方面可以有关联。

Cookie是服务器在HTTP响应中通过Set-Cookie标头发送给客户端的一小段数据。客户端浏览器将Cookie保存在本地，然后在每次对该服务器的后续请求中将Cookie作为HTTP请求的一部分发送回服务器。Cookie通常用于在客户端和服务器之间维护会话状态，以及存储用户相关的信息。

Token是一种用于身份验证和授权的令牌。它是一个包含用户身份信息的字符串，通常是服务器生成并返回给客户端。客户端在后续的请求中将Token作为身份凭证发送给服务器，服务器通过验证Token的有效性来确认用户的身份和权限。

Cookie和Token可以结合使用来实现身份验证和授权机制。服务器可以将Token存储在Cookie中，然后发送给客户端保存。客户端在后续的请求中将Token作为Cookie发送给服务器。服务器通过验证Token的有效性来判断用户的身份和权限。这种方式称为基于Cookie的身份验证。另外，也可以将Token直接存储在请求的标头中，而不是在Cookie中进行传输，这种方式称为基于Token的身份验证。

需要注意的是，Token相对于Cookie来说更加灵活和安全，可以实现跨域身份验证，以及客户端和服务器的完全分离。而Cookie则受到一些限制，如跨域访问限制，以及容易受到XSS和CSRF攻击等。因此，在实现身份验证和授权机制时，可以选择使用Token替代或辅助Cookie。

token 一般在客户端存在哪儿

Token一般在客户端存在以下几个地方：

• 
  
• Cookie：Token可以存储在客户端的Cookie中。服务器在响应请求时，可以将Token作为一个Cookie发送给客户端，客户端在后续的请求中会自动将Token包含在请求的Cookie中发送给服务器。
  
• Local Storage/Session Storage：Token也可以存储在客户端的Local Storage或Session Storage中。这些是HTML5提供的客户端存储机制，可以在浏览器中长期保存数据。
  
• Web Storage API：除了Local Storage和Session Storage，Token也可以使用Web Storage API中的其他存储机制，比如IndexedDB、WebSQL等。
  
• 请求头：Token也可以包含在客户端发送的请求头中，一般是在Authorization头中携带Token。
  

需要注意的是，无论将Token存储在哪个地方，都需要采取相应的安全措施，如HTTPS传输、加密存储等，以保护Token的安全性。

存放在 cookie 就安全了吗？

存放在Cookie中相对来说是比较常见的做法，但是并不是最安全的方式。存放在Cookie中的Token可能存在以下安全风险：

• 
  
• 跨站脚本攻击（XSS） ：如果网站存在XSS漏洞，攻击者可以通过注入恶意脚本来获取用户的Cookie信息，包括Token。攻击者可以利用Token冒充用户进行恶意操作。
  
• 跨站请求伪造（CSRF） ：攻击者可以利用CSRF漏洞，诱使用户在已经登录的情况下访问恶意网站，该网站可能利用用户的Token发起伪造的请求，从而执行未经授权的操作。
  
• 不可控的访问权限：将Token存放在Cookie中，意味着浏览器在每次请求中都会自动携带该Token。如果用户在使用公共计算机或共享设备时忘记退出登录，那么其他人可以通过使用同一个浏览器来访问用户的账户。
  

为了增加Token的安全性，可以采取以下措施：

• 
  
• 使用HttpOnly标识：将Cookie设置为HttpOnly，可以防止XSS攻击者通过脚本访问Cookie。
  
• 使用Secure标识：将Cookie设置为Secure，只能在通过HTTPS协议传输时发送给服务器，避免明文传输。
  
• 设置Token的过期时间：可以设置Token的过期时间，使得Token在一定时间后失效，减少被滥用的风险。
  
• 使用其他存储方式：考虑将Token存储在其他地方，如Local Storage或Session Storage，并采取加密等额外的安全措施保护Token的安全性。
  

token 身份验证代码实现

服务端使用 JWT 进行 token 签名和下发

可以参考使用这个库 node-jsonwebtoken

后端代码示例 (Node.js / Express)，代码简单实现如下：

const express = require('express');
const jwt = require('jsonwebtoken');
const app = express();

const secretKey = 'mysecretkey';


app.use(express.json());


app.post('/api/login', (req, res) => {
// 从请求中获取用户名和密码
const { username, password } = req.body;

// 验证用户名和密码
if (username === 'admin' && password === 'password') {
// 用户名和密码验证成功，生成Token并返回给前端
const token = jwt.sign({ username }, secretKey, { expiresIn: '1h' });

    res.json({ token });

  } else {
// 用户名和密码验证失败，返回错误信息给前端

    res.status(401).json({ error: 'Authentication failed' });

  }

});


app.get('/api/protected', verifyToken, (req, res) => {
// Token验证成功，可以访问受保护的路由

  res.json({ message: 'Protected API endpoint' });

});

function verifyToken(req, res, next) {
const token = req.headers.authorization;

if (!token) {
return res.status(401).json({ error: 'Missing token' });

  }

// 验证Token

  jwt.verify(token, secretKey, (err, decoded) => {
if (err) {
return res.status(401).json({ error: 'Invalid token' });

    }

// Token验证通过，将解码后的数据存储在请求中，以便后续使用

    req.user = decoded;
next();

  });

}


app.listen(3000, () => {
console.log('Server is running on port 3000');

});

在上述后端代码中，我们使用了jsonwebtoken库来生成和验证Token。在登录路由/api/login中，验证用户名和密码成功后，生成一个Token并返回给前端。在受保护的路由/api/protected中，我们使用verifyToken中间件来验证请求中的Token，只有通过验证的请求才能访问该路由。

当然实际开发中， 可以使用中间件来进行 jwt 的验证， 下发方式也因人而异， 可以放在 cookie 中， 也可以作为 response 返回均可， 上述代码仅作参考；

前端代码实现示范如下

前端获取到了Token后将其存储在Cookie中，并在后续请求中自动发送给后端，可以通过以下方式实现前端代码：

import React, { useState, useEffect } from 'react';

function App() {
const [token, setToken] = useState('');

useEffect(() => {
// 检查本地是否有保存的Token
const savedToken = localStorage.getItem('token');
if (savedToken) {
setToken(savedToken);

    }

  }, []);

const handleLogin = async () => {
// 发送请求到后端进行登录验证
const response = await fetch('http://example.com/api/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json',

      },
body: JSON.stringify({ username: 'admin', password: 'password' }),

    });

if (response.ok) {
// 登录成功，获取Token并保存到前端
const data = await response.json();
setToken(data.token);
// 保存Token到本地
localStorage.setItem('token', data.token);

    }

  };

const handleLogout = () => {
// 清除保存的Token
setToken('');
// 清除本地保存的Token
localStorage.removeItem('token');

  };

return (
<div>

      {token ? (
<div>
<p>Token: {token}</p>
<button onClick={handleLogout}>Logout</button>
</div>

      ) : (
<button onClick={handleLogin}>Login</button>

      )}
</div>

  );

}

export default App;