问题:公司系统做安全测试,其中一个问题是没有登录的情况下,直接访问 “项目地址/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文件又能解决此问题的方法(毕竟在安全验收那通过 了哈哈🐸),仅供参考噢~

Logo

前往低代码交流专区

更多推荐