针对 Laravel 后端的 Angular Auth
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26266751/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular Auth against Laravel backend
提问by cpk
I am creating an app using Laravel and building a small internal API to connect to with an Angular frontend.
我正在使用 Laravel 创建一个应用程序并构建一个小型内部 API 以连接到 Angular 前端。
I have the auth working, but wanted to ensure that this is an acceptable way to log in a user, and to make sure everything is secure.
我有 auth 工作，但想确保这是一种可以接受的用户登录方式，并确保一切都是安全的。
Sessions Controller:
会话控制器：
public function index() {
return Response::json(Auth::check());
}
public function create() {
if (Auth::check()) {
return Redirect::to('/admin');
}
return Redirect::to('/');
}
public function login() {
if (Auth::attempt(array('email' => Input::json('email'), 'password' => Input::json('password')))) {
return Response::json(Auth::user());
// return Redirect::to('/admin');
} else {
return Response::json(array('flash' => 'Invalid username or password'), 500);
}
}
public function logout() {
Auth::logout();
return Response::json(array('flash' => 'Logged Out!'));
}
Laravel Route:
Laravel 路线：
Route::get('auth/status', 'SessionsController@index');
Angular Factory:
角度工厂：
app.factory('Auth', [ "$http", function($http){
var Auth = {};
Auth.getAuthStatus = function() {
$http({
method: "GET",
url: "/auth/status",
headers: {"Content-Type": "application/json"}
}).success(function(data) {
if(!data) {
console.log('Unable to verify auth session');
} else if (data) {
console.log('successfully getting auth status');
console.log(data);
// return $scope.categories;
Auth.status = data;
return Auth.status;
}
});
}
return Auth;
}
]);
I would then essentially wrap the whole app in something like an "appController" and declare the 'Auth' factory as a dependency. Then I can call Auth.getAuthStatus() and hide / show things based on the user state since this will essentially be SPA.
然后，我基本上会将整个应用程序包装在“appController”之类的东西中，并将“Auth”工厂声明为依赖项。然后我可以调用 Auth.getAuthStatus() 并根据用户状态隐藏/显示内容，因为这本质上是 SPA。
I realize I also need to hide the /auth/status URI from being viewed / hit by anyone, and was wondering how to do that as well. Kind of a general question but any insight would be greatly appreciated. Thanks.
我意识到我还需要隐藏 /auth/status URI 不被任何人查看/击中，并且想知道如何做到这一点。有点笼统的问题，但任何见解将不胜感激。谢谢。
回答by
Great question. I've answered this same question before so I will say the same thing.
很好的问题。我以前回答过同样的问题，所以我会说同样的话。
Authentication is a bit different in SPAs because you separate your Laravel app and Angular almost completely. Laravel takes care of validation, logic, data, etc.
SPA 中的身份验证有点不同，因为您几乎将 Laravel 应用程序和 Angular 完全分开。Laravel 负责验证、逻辑、数据等。
I highly suggest you read the article linked at the bottom.
我强烈建议您阅读底部链接的文章。
You can use Laravel's route filters to protect your routes from unauthorized users. However, since your Laravel application has now become an endpoint only, the frontend framework will be doing the heavy lifting as far as authentication and authorization.
你可以使用 Laravel 的路由过滤器来保护你的路由免受未经授权的用户的攻击。但是，由于您的 Laravel 应用程序现在仅成为端点，因此前端框架将承担身份验证和授权方面的繁重工作。
Once you have route filters set, that doesn't prevent authorized users from attempting to do actions that they are not authorized to do.
一旦您设置了路由过滤器，就不会阻止授权用户尝试执行他们无权执行的操作。
What I mean by the above is for example:
我上面的意思是例如：
You have an API endpoint: /api/v1/users/159/edit
您有一个 API 端点：/api/v1/users/159/edit
The endpoint is one of the RESTful 7, and can be used to edit a user. Any software engineer or developer knows that this is a RESTful endpoint, and if authorized by your application, could send a request with data to that endpoint.
端点是 RESTful 7 之一，可用于编辑用户。任何软件工程师或开发人员都知道这是一个 RESTful 端点，如果您的应用程序授权，可以向该端点发送包含数据的请求。
You only want the user 159 to be able to do this action, or administrators.
您只希望用户 159 或管理员能够执行此操作。
A solution to this is roles/groups/permissions whatever you want to call them. Set the user's permissions for your application in your Angular application and perhaps store that data in the issued token.
对此的解决方案是角色/组/权限，无论您想怎么称呼它们。在您的 Angular 应用程序中为您的应用程序设置用户的权限，并可能将该数据存储在颁发的令牌中。
Read this great article (in AngularJS) on how to authenticate/authorize properly using frontend JavaScript frameworks.
阅读这篇很棒的文章（在 AngularJS 中），了解如何使用前端 JavaScript 框架正确地进行身份验证/授权。
文章：https: //medium.com/opinionated-angularjs/techniques-for-authentication-in-angularjs-applications-7bbf0346acec
