报表插件（ReportSheet）实现Token鉴权

收藏

本帖最后由 Ellia.Duan 于 2024-11-28 13:45 编辑

其实，在上篇文章中，DataManager之自定义请求之验证Token。我们已经介绍了如何使用DataManager设置token 。但是上文以集算表为例，那么，如何在ReportSheet也实现token呢？
下文将带你实现此功能。
一数据源准备

let studentList = [
{id: 1, name: "张三", age: 4, sex: 0, classId: 1},
{id: 2, name: "李四", age: 8, sex: 1, classId: 1},
{id: 3, name: "小王", age: 7, sex: 0, classId: 2},
{id: 4, name: "小韩", age: 8, sex: 1, classId: 2},
{id: 5, name: "小明", age: 7, sex: 0, classId: 3}
];

复制代码

我们在NodeJS中创建一个Express Web 应用框架，然后创建一个app实例，返回学生数据。
创建package.json

{
"name": "query",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"dependencies": {
"body-parser": "^1.20.2",
"cors": "^2.8.5",
"express": "^4.18.1",
"jszip": "^3.10.1"
}
}

复制代码

创建student.js：

const express = require("express");
var cors = require("cors");
var bodyParser = require('body-parser');
const student = express();
student.use(cors());
student.use(bodyParser.json())
let studentList = [
{id: 1, name: "张三", age: 4, sex: 0, classId: 1},
{id: 2, name: "李四", age: 8, sex: 1, classId: 1},
{id: 3, name: "小王", age: 7, sex: 0, classId: 2},
{id: 4, name: "小韩", age: 8, sex: 1, classId: 2},
{id: 5, name: "小明", age: 7, sex: 0, classId: 3}
];
student.get("/student", (req, res) => {
res.json(studentList);
});
student.listen("3000", () => {
console.log("=========服务启动了，在3000端口=========");
});

复制代码

通过上述代码，我们就简单创建了一个nodejs服务，我们运行一下node student.js ,此时在浏览器中访问 http://localhost:3000/student ，将返回学生列表：
image.png211003111.png

接下来，我们创建一个接口，用来处理token。

student.get("/studentByToken", (req, res) => {
let Authorization = req.headers["authorization"];
console.log(Authorization)
let temp = []
studentList.forEach(item => {
if (item.id == Authorization) {
temp.push(item)
}
})
res.json(temp)
});

复制代码

在上述代码中，我们简单得处理了下token ，根据token返回不同的学生列表。
二、SpreadJS创建数据源
在SpreadJS ，我们来添加一个学生表：

var dataManager = spread.dataManager();
dataManager.addTable("student", {
remote: {
read: function () {
return XXX
}
}
});

复制代码

在前面的文章中，报表插件（ReportSheet）设置数据源，我们已经介绍了多种方式设置数据源，这里我们直接返回一个Promise

function getStudentList(token) {
return new Promise((resolve, reject) => {
fetch("http://127.0.0.1:3000/studentByToken", {
method: "get",
headers: {
"Authorization": token,
},
}).then((response) => response.json())
.then((data) => resolve(data));
});
}

复制代码

在上面的代码中，我们使用fetch调用了"http://127.0.0.1:3000/studentByToken"接口，然后设置了headers ，然后返回查询后的数据。
接下来，我们设置下read：

dataManager.addTable("student", {
remote: {
read: function () {
return getStudentList(1)
}
}
});

复制代码

在上面的代码中，我们传递了一个值为1的token 。
当需要更新token时，我们来重设read：

document.getElementById('reset').addEventListener('click', function () {
let myTable = spread.dataManager().tables["student"];
let options = myTable.options
options.remote.read = function () {
return getStudentList(2);
}
myTable.options = options;
refreshData(spread)
})

复制代码

在上面的代码中，我们重写了学生表的options ，传递值为2的token 。
三、创建报表
接下来我们来创建一个报表，实现上面的功能

function initReport(spread) {
const reportSheet = spread.addSheetTab(0, '报表1', GC.Spread.Sheets.SheetType.reportSheet);
const templateSheet = reportSheet.getTemplate();
const columns = ['id', 'name', 'age', 'sex', 'classId'];
columns.forEach((columnName, i) => {
let obj = {
type: "List",
binding: `student[${columnName}]`,
}
templateSheet.setValue(0, i, columnName);
templateSheet.setTemplateCell(1, i, obj)
})
}

复制代码

在上面的代码中，新建了一个报表sheet , 然后在模板中设置了字段。

四、结果
初始化：
image.png432460021.png

更新token :

完整代码，参考附件：

read_header.html (5.02 KB, 下载次数: 2)

		自动登录	找回密码
密码			立即注册

报表插件（ReportSheet）实现Token鉴权

0 个回复

浏览过的版块

SpreadJS 认证

SpreadJS 高级认证