新窗口打开vue项目中的静态pdf文件，并做权限控制

最新推荐文章于 2024-08-21 16:37:11 发布

包子脸呀

最新推荐文章于 2024-08-21 16:37:11 发布

阅读量4k

点赞数 10

文章标签： javascript vue.js es6 前端前端框架

本文链接：https://blog.csdn.net/baozilianya/article/details/124227140

版权

工作中遇到的bug(vue) 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了如何通过调整项目结构和使用Vue组件来加强安全测试，防止未登录用户直接访问PDF文件。解决方案包括将PDF移至assets文件夹，创建pdf.vue页面，利用路由权限控制，并在vue.config.js中配置识别PDF文件，最终实现未登录访问跳转到登录界面。

摘要由CSDN通过智能技术生成

问题：公司系统做安全测试，其中一个问题是没有登录的情况下，直接访问 “项目地址/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: {},
        },
      ],
    })
  },