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文件使用Bearer Authentication Token标头。这适用于Axios（负责获取API数据），您可以在其中手动定义标头，但是vue-router没有此选项，并且由于它不发送Authorization标头，因此不进行身份验证，Express会阻止具有403和vue-router的文件无法导入该文件。

是否可以通过导入（基本上只是一个GET请求）发送Authorization标头？

谢谢。

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

编辑：建议的重复问题很少受到关注，给出的唯一解决方案（基本上分为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')
}

话虽如此，我建议保护前端资产的时间要比需要加载拆分数据块且不需要Authorization标头提供静态资产的时间早得多。

有时，您可以根据使用情况在网络层（负载均衡器等）执行此操作。有时候，使用基于服务器的方法（例如使用Nuxt渲染应用程序）将是您想要的。

Answer 3

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

如果我有误会，请随时告诉我。

使用Vue-Router发送标题

3 个答案: