<p>SO Komuniti,</p> <p>Saya cuba menambah pengesahan luaran pada aplikasi Vue 2 sedia ada. Masalah yang saya hadapi ialah apabila IdP luaran mengubah hala semula ke aplikasi Vue dengan laluan <code>/redirect</code>, Penghala Vue nampaknya tidak menghormati laluan dan laluan yang dikemas kini ke komponen yang betul . Dalam erti kata lain, Penghala Vue akan menghala ke komponen <kod>/</kod> </p> <p>Vue Router menetapkan <kod>mod: 'sejarah'</kod> dan set Webpack <kod>historyApiFallback: benar,</kod>. </p> <h1>Tingkah laku semasa: </h1> <ol> <li>Pengguna menavigasi ke <kod>https://localhost:8080/</code> dan komponen <kod>Log masuk</code> </li> <li>Pengguna memasukkan ID mereka dan diubah hala ke IdP luaran. </li> <li>Selepas pengesahan berjaya, IdP kembali ke URL ubah hala yang ditentukan: <kod>https://localhost:8080/redirect</code></li> <li>Disebabkan mod sejarah, Webpack menghantar penyemak imbas ke <code>/</code>, yang mengembalikan komponen <code>Log</code> </li> <li>Dalam komponen <kod>Log masuk</kod>, penghala <kod>dipasang()</kod> .push({ laluan: '/redirect' });</code></li> <li>Vue Router pergi ke laluan <code>/</code> dan bukannya <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</p> <h2><code>webpack.dev.js</code></h2> <pre class="brush:php;toolbar:false;">devServer: { historyApiFallback: benar,</pre> <h2><code>router.js</code></h2> <pre class="brush:php;toolbar:false;">const router = new VueRouter({ mod: 'sejarah', laluan: [ ... { laluan: '/redirect', komponen: Ubah hala, }, { laluan: '/', ubah hala: () => { }, ... router.beforeEach((kepada, dari, seterusnya) => { pengguna const = store.state.user.authorizedUser const toPath = to.path if (toPath === '/redirect') kembali });</pre> <h2><code>App.vue</code></h2> <pre class="brush:php;toolbar:false;">Vue baharu({ el: '#login', render: h => h(Log Masuk), kedai, })</pre> <h2><kod>登录.vue</code></h2> <pre class="brush:php;toolbar:false;">mounted() { if (window.location.pathname === '/redirect') router.push({ path: '/redirect' }); }</pre> <p>请告诉我是否需要提供任何其他细节或代码。提前感谢您的帮助。</p>