Mengendalikan Vue Router (mod sejarah) dan ubah hala luaran Webpack
<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>
