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

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