Mengendalikan Vue Router (mod sejarah) dan ubah hala luaran Webpack

Question

SO Komuniti,

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 /redirect, 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 /

Vue Router menetapkan mod: 'sejarah' dan set Webpack historyApiFallback: benar,.

Tingkah laku semasa:

1. Pengguna menavigasi ke https://localhost:8080/ dan komponen Log masuk
2. Pengguna memasukkan ID mereka dan diubah hala ke IdP luaran.
3. Selepas pengesahan berjaya, IdP kembali ke URL ubah hala yang ditentukan: https://localhost:8080/redirect
4. Disebabkan mod sejarah, Webpack menghantar penyemak imbas ke /, yang mengembalikan komponen Log
5. Dalam komponen Log masuk, penghala dipasang() .push({ laluan: '/redirect' });
6. Vue Router pergi ke laluan / dan bukannya /redirect

技术细节：

Vue - 2.5.15

路由器视图 - 3.0.0

Webpack - 4.17.1

Webpack 开发服务器 - 3.1.4

webpack.dev.js

devServer: {
  historyApiFallback: benar,

router.js

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
});

App.vue

Vue baharu({
  el: '#login',
  render: h => h(Log Masuk),
  kedai,
})

登录.vue

mounted() {
  if (window.location.pathname === '/redirect') router.push({ path: '/redirect' });
}

请告诉我是否需要提供任何其他细节或代码。提前感谢您的帮助。

Answer 1

Jadi, masalahnya nampaknya dalam komponen Login 在路由器启动之前充当交通警察的角色。我不得不编辑 Login 组件以手动挂载 Redirect peringkat atasan.

Saya tidak mengesyorkan persediaan ini.