Laravel 9 使用 Jetstream - 登錄重定向到 Angular 前端時出現問題

Question

我們正在使用 Jetstream 和 Inertia/Vue 運行 Laravel 9 和 Angular 14。登錄時，用戶被重定向到/books/user/my-books ，它在 Laravel 路由器中僅定義為：

Route::any('/{any}', [AngularController::class, 'index'])->where('any', '^(books).*$');

任何以/books開頭的路由都交給 Angular 處理。在 Angular 編譯時，我們將其 index.html 復制到 Laravel 的/resources/views中作為 angular.blade.php。 這基本上是此處描述的設置： https://medium.com/swlh/how-to-setup-laravel-with-angular-d3de171afa03

當用戶從 Vue 的前端單擊指向 Angular 頁面的鏈接或冷加載它們時，此設置有效，但是當我們嘗試加載與登錄重定向相同的目的地時，這些加載在 iframe 中。最終結果是一個空白頁面，看起來像幾乎全屏模式。 當瀏覽器的重新加載按鈕被點擊時，請求的頁面加載時沒有 iframe，事情又恢復了。 （在登錄時重定向到 Angular 地址時，URL /user/login會停留在地址欄中 - 當如上所述單擊重新加載時，然后會出現為 HOME 常量指定的目標地址。）

我們現在使用的解決方案是將以下內容添加到復制到/resources/views/angular.blade.php的 Angular index.html 中：

<script type="text/javascript">
  // break out of iframe hack-job
  if (top.location != self.location) {
    top.location = self.location;
  }
</script>

這有效，但它仍然閃爍全屏模式並且用戶體驗受到影響。 當然，這感覺就像是一項完全的黑客工作。

幾點注意事項：重定向的目的地在 HOME 常量的app/Providers/RouterServiceProvider.php中定義。 這是用於在登錄后定義登陸頁面的默認 Jetstream 設置。

重定向到 Vue 路徑有效 - 這些目的地正在干凈地加載，沒有 iframe。

我們已經嘗試在例如/user/redirect處創建一個 Laravel controller，將 HOME 常量設置為目標，讓 Laravel 在將 controller 重定向到 Angular 端之前“加載得更充分”。 相同的結果。

我們嘗試在 Laravel 的路由器中定義 HOME url，並使用 angular.blade 處理它。 這也沒有用，我們幾乎消除了在登錄時重定向到通配符路由的可能性。

為什么我們的 Angular 路由在通過 Vue 中的鏈接和冷加載訪問時加載正常，但在登錄時重定向到時，它們被包裹在 iframe 中，我們如何防止這種行為？

Answer 1

我們解決了這個問題。 創建 /user/redirect 路由后，我們使用 UserRedirectController 和以下代碼為其提供服務：

class UserRedirectController extends Controller
{
    public function user_login_redirect() {
        return Inertia::location('/books/user/my-books');
    }
}

簡而言之：使用 Inertia 進行重定向解決了這個問題——一切都在沒有閃爍模式的情況下工作，並且不需要 iframe 突破代碼。 這基本上與幾個月前在 SO 問題中重定向到 Vue 的解決方案相同： How to redirect to a blade dashboard page from Vue login Component page after successfully login in laravel JetStream?