Laravel + Angular:保护Angular页面

时间:2016-06-09 04:43:29

标签: css angularjs .htaccess laravel authentication

如何阻止未登录Laravel会话的用户下载AngularJS页面?

我在后端有一个带Laravel的网站。还有一个AngularJS应用程序放在public / myApp / index.html文件夹中。 .htaccess返回引用的所有文件,因此http://www.example.com/myApp/index.html返回Angular应用程序,并且无需身份验证即可下载所有js和css请求。

对于所有对Larvel会话进行身份验证的用户,阻止下载与我的Angular应用程序相关的所有js,html和css文件(即在/ myApp子目录中)的最佳方法是什么?

3 个答案:

答案 0 :(得分:1)

我经常遇到这个问题,并找到了一个易于实施且完全安全的解决方案。

您可以定义一条路线,通过Laravel中的angularJs加载所有'SECURE'模板,如下所示:

Route::get('/templates/secured/{name}', function ($name) {
  if(Auth::check())
    return view('templates.' . $name);
  else
    return '404';
});

如果你真的必须在auth之后提供你的静态文件。 这是一个小黑客.... 您可以在.php文件中编写静态JS和CSS代码,并将它们存储在'templates / assets /'

然后您可以使用与上述相同的方法。 你也不会有太大的速度。所有css和js的语法着色和缩进都可以在php文件中使用。

答案 1 :(得分:0)

您可以在客户端和服务器之间传递jwt(json web token)。如果用户已登录,则jwt将被存储,因此即使您必须向laravel后端发送API请求之前,angular也可以通过不具有jwt有效负载来检测未被authed的用户。我使用tymondesigns/jwt-auth来处理来自laravel和jwt的jwt satellizer用于处理用户身份验证和存储从laravel传递的jwt令牌的角度。

答案 2 :(得分:0)

这些选项都没有真正解决我想要的问题。我最终做的是以下内容。我正在使用第三方Angular前端模板(来自ThemeForest的Angular),其中包含数十万行代码和数百个不同的文件。这些文件的很大一部分是样式表和通用JavaScript库(Angular,JQuery等)。我不介意将这些内容放入公共文件夹并将文件提供给未经过身份验证的用户。

但是,我的文件的另一部分是修改过的文件。例如,一个文件具有导航元素,几乎可以布局我的专有业务系统的整个格式,并说明了很多关于业务的内部操作。因此,像导航html,css和js这样简单的东西是敏感的,只应该提供给经过身份验证的用户。

我所做的是将公共内容和受保护内容分成相同(或至少类似)的目录树,其中一个位于/ public / *,另一个位于/ storage / app / *。我的所有非敏感内容(主要是模板样式表和通用JS库)都在" public"树,而敏感的内容进入我的"存储/应用程序"树。例如:

- public --- js ----- someThirdPartyJavaScript.js ----- loginController.js (unprotected) ----- ... --- libs ----- angular.js ----- jquery.js ----- ... --- css ----- unprotectedStyleSheet.css ----- ... --- tpl ----- loginTemplate.html - storage (all protected content goes in this tree) --- app ----- js ------- myApp.js ------- directives --------- myCustomDirective.js --------- businessNavigationDirective.js (sensitive and proprietary) ----- css (for protected css files) ----- libs (for protected libs) ----- tpl (for protected .html files) ------- clientInformationSheet.html (sensitive content indicating the structure of our customer data)

在.htaccess中,我使用以下规则基本上返回公共树中存在的任何文件:

    # If the file exists in laravel/public and the URI does not specify ".php" then go get it.
RewriteCond %{DOCUMENT_ROOT}/laravel/public/%{REQUEST_URI} -f
RewriteCond %{REQUEST_URI} !^.*\.php$
RewriteRule ^(.*)$ laravel/public/$1 [L]

.htaccess发送所有其他请求由Laravel index.php

处理

然后,我创建了一个Laravel 5.2路由来捕获我的Angular应用程序中的所有路径。请注意,中间件指定了auth,因此除非用户已经过身份验证,否则这些文件将不会从存储目录返回给用户:

use League\Flysystem\Util\MimeType as MimeType;

Route::any('/{any}', ['middleware' => 'auth', function($uri){
    // Auth::logout();
    $uri = storage_path('app/' . $uri);

    if (!File::exists($uri)){
        return "Path not found.";
    } 

    $extension = File::extension($uri);

    if (array_key_exists($extension, MimeType::getExtensionToMimeTypeMap())){
        $mimeType = MimeType::getExtensionToMimeTypeMap()[$extension];  
    } else {
        $mimeType = "text/plain";
    }

    return response(File::get($uri))
        ->header('Content-Type', $mimeType);

}])->where('any', '^MySuperCoolApplicationSubDirectory/.*');

保持" public"之间的目录结构非常相似和"存储/应用程序"这使得组织哪些文件非常敏感,哪些文件不敏感以及应用程序继续像以前一样运行,这次所有敏感内容都被未经身份验证的用户阻止。