基于 Laravel API 后端和 Vuejs 前端构建

Posted 2023-02-22

【中文标题】基于 Laravel API 后端和 Vuejs 前端构建

【英文标题】：Building on Laravel API backend and Vuejs frontend

【发布时间】：2018-03-19 18:21:21

【问题描述】：

如果这个方法行得通，我需要一点帮助。

首先，我有一个使用Laravel 和Laravel Passport 创建的后端API 服务器。其次，我还在同一个项目中使用 Vuejs 创建了前端。因此，我将需要同时使用 api.php 和 web.php 路由。我还使用vue-router 重定向这些路线。

---

后端

在web.php 路由中，我使用了两种不同的路由，因为我想在我的登陆站点上显示通用内容，另一个作为需要身份验证的仪表板。

示例：

web.php

如上所述，这是为了捕获地址栏中直接操作的404 Not Found 的路由，以正确重定向到各自的页面。最后我还得到了两个不同的刀片模板，分别命名为dashboard.blade.php 和home.blade.php。对于 Laravel-Vuejs 项目来说，这是一个好的做法吗？或者有什么你想推荐的方法？

dashboard.blade.php

home.blade.php

---

登录页面使用登录页面布局到仪表板页面的另一个布局的登录相关问题

我在使用密码授权进行 API 登录时遇到的问题是登录页面没有正确重定向到仪表板页面。 URL 路由确实发生了变化，但页面呈现为空白。

这里使用axios登录：

【问题讨论】：

如果你有VueJS 那么为什么不使用Vuejs-router 来重定向页面呢？

@NitishKumar，我很抱歉。是的，我使用vue-router 和vuex 进行路由和身份验证。事实上，我正在使用我的 vue-router 路由重定向页面。我还使用 axios 来处理 ajax 请求。问题是成功登录将重定向到另一个布局刀片模板上的空白页面。

【参考方案1】：

我已经设法解决了这个问题。

在web.php，因为我们有

Route::get('/dashboard/any?', function () 
    return view('dashboard');
)->where('any', '^(?!.*api).*$[\/\w\.-]*');

在我的Login.vue 重定向处理程序中，我使用location.href = '/dashboard' 而不是this.$router.push('dashboard')。