使用 Vue-Router 发送标头

Question

我已经在互联网上搜索了一段时间，甚至在这里检查了所有建议的问题，但我一无所获。

基本上，我使用 vue-router 在用户单击视图时加载视图（没有预取，只是延迟加载），使用导入 Vue 视图/组件的函数。为了更好地形象化，我做了一个简单的例子来说明我在做什么：

const router = new VueRouter({
  routes: [
    ...
    {
      path: "/a_page",
      component: function() {
        return import("./views/A_Page.vue");
      }
    }
  ]
});

我在后端使用 Express 来保护某些路由，因为在前端保护它是浪费精力，因为用户可以轻松绕过“保护”，如果他愿意的话。此外，所有视图都有自己的拆分 .js 文件（使用 "webpackChunkName"），并且 Express 需要为每个请求的 API 调用 OR .js 文件提供承载身份验证令牌标头。这适用于 Axios（负责获取 API 数据），您可以手动定义标头，但 vue-router 没有此选项，并且由于它不发送 Authorization 标头，因此不会进行身份验证，Express 会阻止带有 403 的文件并且 vue-router 无法导入该文件。

有什么方法可以将 Authorization 标头与导入一起发送（基本上只是一个 GET 请求）？

提前致谢。

---

如果有人认为我以错误的方式处理问题，请随时发表评论并提出其他建议。

---

编辑：建议的重复问题没有得到足够的关注，并且给出的唯一解决方案（基本上分为 2）不再适用于当前的 webpack； onload(event) 和 onerror(event) 未定义。

Answer 1

您可以使用路由器防护而不是使用基本身份验证。

我使用这种方法，以及延迟加载的路由。如果身份验证失败，您可以将用户重定向到登录页面。

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
    If (auth) { // get value of cookie etc for a jwt token or similar auth method
        next() // proceed
   }
   else {
        next(false) // cancel navigation
        // or
        next(“/login-url”) // redirect you login url
    }
})

此外，您可以使用 axios 方法对每次路由更改进行身份验证。

Answer 2

如果您想发送 Authorization 标头（这似乎不是一件容易的事，因为没有人知道如何去做...）我认为您可以覆盖 webpack 的 jsonp 函数，它用于在 splitChunks 中加载块...

Here's the docs for the webpack function that loads the chunks

您将使用修改后的块加载函数覆盖您的 webpack 配置，然后将其绑定到您的 vue.config.js 中，就像这样...

// vue.config.js

module.exports = {
    configureWebpack: require('./webpack.config.js')
}

话虽如此，我建议在您需要加载拆分块并且不需要授权标头为您的静态资产提供服务时更早地保护您的前端资产。

有时您可以在网络层（负载平衡器等）执行此操作，具体取决于您的用例。其他时候使用基于服务器的方法，例如使用 Nuxt 渲染您的应用，将是您想要的。

Answer 3

如果我理解正确（请随时纠正我），您能否在实际路由之前使用 axios 进行身份验证调用，或者在使用挂载调用进行路由时进行身份验证调用？特别是如果没有有效的身份验证，您可以重定向到登录页面或重新路由到错误页面。

如果我有任何误解，请随时告诉我。