javascript - 使用 Vue-Router 发送 header

Question

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

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

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

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

有没有办法通过导入发送授权 header (基本上只是一个 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 方法对每个路由更改进行身份验证。