出现Unpected Application Error
路由的index.js里面createBrowserRouter时添加{basename:’/pan’}参数
nginx配置文件添加,否则刷新路由时会报找不到/pan/home
1
2
3
4
5
| location /pan {
root html;
index index.html;
try_files $uri $uri/ /pan/index.html =404;
}
|
利用HTML5 File API 实现权限验证
- 后端提供文件下载的接口与其他接口保证同样的权限验证策略，例如在header中验证Authorization头
- 前端使用ajax请求文件下载的接口
- 前端利用window.URL.createObjectURL将请求得到的内容转化为objectUrl
- 前端模拟点击，使用window.URL.revokeObjectURL(url)实现文件下载
1
2
3
4
5
6
7
8
9
10
11
12
| // 客户端
const download = async (url) => {
const response = await axios.get('/download/fileA', {headers: {Authorization: 'Token xxxxxx'}});
const blob = new Blob([response.data], { type: 'text/plain;charset=utf-8' });
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = [fileName];
a.click();
window.URL.revokeObjectURL(url);
}
|
基于jwt实现权限验证
- 后端需要额外提供一个接口供用户获取下载用的token
- 客户端使用ajax请求该接口获取token
- 客户端模拟打开拼接了token的url:/download/fileA?token=xxx
- 后端解析该token判断用户是否有权限下载该文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| // 服务器端
const jwt = require('jsonwebtoken');
...
router.get('/download/token', (req, res) => {
const secret = 'xxxxxx'
const token = jwt.sign({}, secret, { expiresIn: 2 }); // 2s内有效
return res.json({ token });
});
// 客户端
const download = async (url) => {
const { data: { token } } = await axios.get('/download/token');
let finalUrl = url;
if (url.includes('?')) {
finalUrl += `&token=${token}`;
} else {
finalUrl += `?token=${token}`;
}
window.open(finalUrl);
}
// 服务器端具体解析token下载文件的代码就省略了。
// jwt的使用参考jsonwebtoken库的使用
|