详解使用JWT实现单点登录（完全跨域方案）

2023年5月19日下午6:47 • JavaScript

下面我将使用Markdown的格式为您详细讲解使用JWT实现单点登录（完全跨域方案）的完整攻略。

什么是JWT

JWT（JSON Web Token）是一种用于验证身份的技术，它可以根据一定的规则生成一个加密的Token，这个Token中包含了用户的一些身份信息，如用户ID、用户名、邮箱、角色等，这些信息可以被访问验证时进行验证。

通常情况下，JWT会在用户登录时被生成，并且在之后的请求中发送给服务器进行验证。这样，在跨越多个域名的应用程序之间进行单点登录时，JWT是一种非常实用的身份验证方式。

使用JWT实现单点登录-完全跨域方案

1. 前提条件

在进行完全跨域方案之前，您需要先完成以下工作：

安装node.js
安装cors模块

安装cors模块的命令如下：

npm install cors

2. 创建JWT

首先，您需要在您的服务端创建一个JWT，然后将其发送给客户端。

示例代码：

const jwt = require('jsonwebtoken');

const token = jwt.sign({
  data: {userid: ‘001’},
  exp: Math.floor(Date.now() / 1000) + (60 * 60) // 1小时过期
}, ‘mysecret’);

res.send({token});

在这个示例代码中，我们使用jsonwebtoken这个npm包来创建JWT，其中：

data中是我们需要存储到JWT的数据，这个数据可以是任何类型的。
exp是JWT的过期时间，这里设置了1小时过期时间。
‘mysecret’是用于加密这个JWT的密钥。

3. 客户端发送请求

然后，您需要在客户端生成JWT并将其发送给服务端。示例代码：

fetch(‘http://localhost:3000/login’, {
  method: ‘POST’,
  mode: ‘cors’,
  headers: {
    ‘Content-Type’: ‘application/json’
  },
  body: JSON.stringify({ username: ‘user’, password: ‘pwd’ })
})
.then(res => res.json())
.then((data) => {
  localStorage.setItem(‘token’, data.token);
});

在这个示例代码中，我们使用fetch库向服务端发送POST请求，请求的数据包括用户名和密码。然后从服务端返回的数据中获取JWT，并保存到LocalStorage中以备使用。

4. 服务端验证JWT

在服务端接收到来自客户端的请求时，需要对请求中携带的JWT进行验证。示例代码：

const jwt = require('jsonwebtoken');
const cors = require('cors');

const app = express();

app.use(cors());

app.post('/api/userinfo’, (req, res) => {
  const token = req.headers.authorization;
  jwt.verify(token, ‘mysecret’, (err, decoded) => {
    if (err) {
      res.sendStatus(401);
      return;
    }
    res.json({
      username: ‘user’,
      email: ‘test@test.com’,
      role: ‘admin’
    });
  });
});

在这个示例代码中，我们在服务端使用jsonwebtoken和cors库。在验证请求中携带的JWT时，需要使用jsonwebtoken中的verify方法，看看JWT是否被正确签名。如果签名正确，您可以从JWT的payload中获取用户数据并返回给客户端。

5. 客户端请求验证

最后，当客户端想要请求某些内容时，需要在请求头中携带刚才生成的JWT。示例代码：

fetch(‘http://localhost:3000/api/userinfo’, {
  method: ‘GET’,
  headers: {
    ‘Content-Type’: ‘application/json’,
    ‘Authorization’: localStorage.getItem(‘token’)
  }
})
.then(res => res.json())
.then((data) => {
  console.log(data);
});

在这个示例代码中，我们向/services/userinfo发送一个GET请求，并在请求头中携带JWT，服务端验证JWT，并将相应的用户信息返回给客户端。