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 样板 .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

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

我将所有 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（索引页面），Angular 反过来会检测其路由之间的匹配并将用户发送到预期的位置页。如果用户尝试导航到不存在的页面，例如

/nothingtoseehere/

，则会发生完全相同的情况 - 它们只会被发送到索引页面。从这里你可以使用 Angular 处理错误。

希望这有点用。

Answer 2

已修复！ :-)

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

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

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