新窗口打开vue项目中的静态pdf文件,并做权限控制
问题:公司系统做安全测试,其中一个问题是没有登录的情况下,直接访问 “项目地址/operate.pdf ”此地址,会展示pdf文件。描述:点击系统内的一个按钮会打开新窗口展示系统操作手册(operate.pdf)文件,以下为原本的代码,原来将pdf文件放在public文件夹下, “项目地址/operate.pdf ”此地址就是访问的public文件夹下的pdf文件<!-- 访问的是publi
·
问题:公司系统做安全测试,其中一个问题是没有登录的情况下,直接访问 “项目地址/operate.pdf ”此地址,会展示pdf文件。
描述:点击系统内的一个按钮会打开新窗口展示系统操作手册(operate.pdf)文件,以下为原本的代码,原来将pdf文件放在public文件夹下( “项目地址/operate.pdf ”就是访问的public文件夹下的pdf文件 )
<!-- 访问的是public文件夹下的pdf文件 -->
<a class="logout_title" target="_blank" href="/operate.pdf">
<a-icon type="question-circle-o"></a-icon>
</a>
解决:删除public文件夹下的pdf文件,将pdf文件放在assets文件夹下,新建一个pdf.vue页面,将上述href代码改为访问pdf.vue页面,在pdf.vue页面中打开operate.pdf文件(因为想到路由是做了权限控制的,所以采用访问路由的形式)
<!-- href访问的地址为路由地址 -->
<a class="logout_title" target="_blank" href="/operate">
<a-icon type="question-circle-o"></a-icon>
</a>
添加pdf.vue页面路由,与login路由在同一配置里 (这是本项目中的路由写法)
// 添加操作手册pdf路由
{
path: '/operate',
component: BlankLayout,
redirect: '/operate/pdf',
children: [
{
path: 'pdf',
name: 'OperatePdf',
component: () => import('@/views/account/operatePdf')
}
]
}
pdf.vue
<template>
<iframe :src="operatePdf"></iframe>
</template>
<script>
// 此处引入pdf文件会报错,需在vue.config.js文件中进行配置
import operatePdf from '../../assets/operate.pdf'
export default {
name: 'OperatePdf',
data() {
return {
operatePdf
}
},
}
</script>
<style scoped>
iframe {
width: 100vw;
height: 100vh;
border: none;
}
</style>
vue.config.js文件中进行配置
configureWebpack: config => {
// 识别pdf文件
config.module.rules.push({
test: /\.pdf$/,
use: [
{
loader: 'file-loader',
options: {},
},
],
})
},
现在未登录访问 “项目地址/operate.pdf ”此地址,会跳转到登录界面
这仅仅只是本人想到的一个不走后端接口获取pdf文件又能解决此问题的方法(毕竟在安全验收那通过 了哈哈🐸),仅供参考噢~
更多推荐
已为社区贡献3条内容
所有评论(0)