處理Vue Router（歷史模式）和Webpack外部重定向

Question

<p>SO社區，</p> <p>我正在嘗試在現有的Vue 2應用程式中添加外部身份驗證。我遇到的問題是，當外部IdP重定向回Vue應用程式並帶有路徑<code>/redirect</code>時，Vue Router似乎不會遵守更新後的路徑並路由到正確的組件。換句話說，Vue Router會將路由到<code>/</code>組件而不是<code>/redirect</code>組件。 </p> <p>Vue Router設定了<code>mode: 'history'</code>和Webpack設定了<code>historyApiFallback: true,</code>。 </p> <h1>當前行為：</h1> <ol> <li>使用者導覽至<code>https://localhost:8080/</code>並呈現<code>Login</code>元件。 </li> <li>使用者輸入其ID並被重定向到外部IdP。 </li> <li>成功驗證後，IdP回到指定的重定向URL：<code>https://localhost:8080/redirect</code></li> <li>由於歷史模式，Webpack將瀏覽器發送到<code>/</code>，從而返回<code>Login</code>元件。 </li> <li>在<code>Login</code>元件中，<code>mounted()</code>鉤子檢查<code>if (window.location.pathname === '/redirect') router.push({ path: '/redirect' });</code></li> <li>Vue Router轉到<code>/</code>路徑，而不是<code>/redirect</code>和其組件。</li> </ol> <h2>技術細節：</h2> <p>Vue - 2.5.15</p><p> 視圖路由器 - 3.0.0</p><p> Webpack - 4.17.1</p><p> Webpack 開發伺服器 - 3.1.4

<程式碼>webpack.dev.js

devServer: {
  HistoryApiFallback: true,</pre>
<程式碼>router.js
const router = new VueRouter({
  模式：“歷史”，
  路線：[

…

    {
      路徑：'/重定向'，
      元件：重定向，
    },
    {
      小路： '/'，
      重定向：() => {

    },

…

router.beforeEach((to, from, next) => {
  const user = store.state.user.authorizedUser
  const toPath = to.path

  if (toPath === '/redirect') 返回
});</pre>
App.vue
new Vue({
  el: '#login',
  渲染：h => h(登入),
  店鋪，
})</pre>
<h2><代碼>登入.vue</code></h2>
mounted() {
  if (window.location.pathname === '/redirect') router.push({ 路徑: '/redirect' });
}</pre>
<p>請告訴我是否需要提供任何其他細節或代碼。提前感謝您的幫助。</p>

Answer 1

所以，問題似乎出現在頂層元件 Login 在路由器啟動之前充當交通警察的角色。我必須編輯 Login 元件以手動掛載 Redirect 元件。

我不建議這種設定方式。