Laravel + AngularJS 将路由传递给 Angular

Question

我正在尝试使用 laravel 中的 RESTful api 和 angular 中的富客户端编写应用程序。顺便说一句，这很好。 Laravel 执行初始路由并启动 Angular 客户端，然后发现它需要身份验证并重定向到 /login。从这里开始，它是纯客户端通过 REST 与后端异步通信。如果你问我很漂亮。但;如果用户在某个时候想要刷新浏览器，或者将 url 作为链接发送给某人 - 它会中断。坏的！

例如，在/signup/ 上刷新，会导致 laravel 首先捡起球并通过重定向到默认路由

start/global.php

App::error(function(NotFoundHttpException $exception, $code) {
    $allowed = array("api","css","fonts","html","img","js");
    if(0 == count(array_intersect(array_map('strtolower', explode(' ', Request::path())), $allowed))) {
        return Redirect::route('home');
    }
});

这导致我失去了用户最初试图到达的地方。一旦 angular 获得控制权，原始路线就会​​丢失，它只能再次呈现/login。我猜如果我在 .htaccess 中做一些魔术，我可以松开错误处理程序，目前标准HTML5 boilerplate .htaccess +

<IfModule mod_rewrite.c>
    Options +FollowSymlinks
    Options -MultiViews
  # Options +SymLinksIfOwnerMatch
    IndexIgnore */*

    RewriteEngine On
    RewriteBase /

    # if a directory or a file exists, use it directly
    RewriteCond %{REQUEST_FILENAME} -s [OR]
    RewriteCond %{REQUEST_FILENAME} -l [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^.*$ - [NC,L]

    # otherwise forward it to index.php
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^(.*)$ index.php [L,QSA]
</IfModule>

.htaccess 和 apache 配置对我来说是个大黑洞。我觉得它一点也不直观。

对于在 Laravel 上运行的单页应用，当用户直接刷新或启动 URL 时，如何确保用户获得正确的角度视图？

Answer 1

已修复！ :-)

由于我通常只想在服务器上找不到路由时将请求转发到 Angular，所以我只调用应用程序 ONLY 视图创建控制器。

start/global.php

App::error(function(NotFoundHttpException $exception, $code) {
    $allowed = array("api","css","fonts","html","img","js","scripts");
    if(0 == count(array_intersect(array_map('strtolower', explode(' ', Request::path())), $allowed))) {
        // Only return the view response if the request does not specifically ask for a json response.
        if (!Request::wantsJson()) {
            // Instead of performing a redirect here, pretend everything is 
            // normal and act as if the 'home' route has been called.
            $controller = new HomeController();
            return $controller->callAction('getHome', array());//Redirect::route('home');
        }
    }
});

可能是一个肮脏的黑客，但如果没有人提出更好的解决方案，我会将其标记为解决方案。 :-)

Answer 2

如果我正确理解了您的问题，我就是这样做的：

我将 Laravel 的所有 RESTful API 路由分组到 /api/ 目录下，如下所示：

Route::group(array('prefix' => 'api'), function()
{
    Route::resource('users', 'UsersController');
    Route::resource('products', 'ProductController');
    ...
}

这个目录当然可以叫任何名字。但重要的是，这意味着你可以将 Angular 路由与 Laravel 的 API 路由分开，只要用户不尝试直接访问 /api/ 目录即可。

然后释放所有其他路由以由 Angular 处理。这就是我的 Laravel routes.php 文件的其余部分的外观：

// index route
Route::get('/', function()
{
    return View::make('index'); // redirect to AngularJS
});

// catch-all -- all routes that are not index or api will be redirected
App::missing(function()
{
    return View::make('index'); // should also redirect to AngularJS
}

最后一个功能很重要。以您的用例为例，如果用户要在 /signup/ 上刷新，那么 Laravel 会简单地将路由传递给 Angular（索引页面），然后它会检测其路由之间的匹配并将用户发送到预期的页。如果用户试图导航到一个不存在的页面，例如/nothingtoseehere/，则会发生完全相同的情况——它们只会被发送到索引页面。从这里您可以使用 Angular 处理错误。

希望对你有用。