Question

我正在尝试构建一个需要用户登录的AngularJS应用程序。

当他们第一次访问该应用程序时，他们将被重定向到登录页面（http://domain.my:3000/login）。当用户输入他的用户名和密码时，将调用一个Web服务（http://domain.my:4788/WebServices/user/login?username=XXX&password=YYYY），它返回JSON数据，其中包含用户的id，名称等，需要存储在某处（cookies / localstorage？）。

我怎么能这样做？我是否需要创建一个服务器（可能在nodejs上）来处理对Web服务的请求，或者angularjs服务是否足够？

app.service("UserService", function($http) {
}

我的想法是创建一个角度服务来完成所有工作（在localstorage中创建cookie /条目），而登录控制器将使用$ http对用户进行身份验证。

我已经使用本地策略或https://github.com/fnakstad/angular-client-side-auth等示例查看了Passport的内容，但我不认为它们涵盖了我想要达到的目标，或者我不能简单地理解它们。

我希望这不是一般问题，并提前感谢任何回复。

Answer 1

我在这里回答了类似的问题：AngularJS Authentication + RESTful API

我为AngularJS module写了UserApp，它几乎可以满足您的需要。你可以：

修改模块并将功能附加到您自己的API或
将该模块与UserApp（基于云的用户管理API）

https://github.com/userapp-io/userapp-angular

它支持受保护/公共路由，在登录/注销时重新路由，用于状态检查的心跳，将会话令牌存储在cookie中，事件等。

如果您使用UserApp，则不必为用户填写任何服务器端代码（不仅仅是验证令牌）。拿course on Codecademy进行试用。

以下是一些如何运作的例子：

包含错误处理的登录表单

<form ua-login ua-error="error-msg">
    <input name="login" placeholder="Username"><br>
    <input name="password" placeholder="Password" type="password"><br>
    <button type="submit">Log in</button>
    <p id="error-msg"></p>
</form>

包含错误处理的注册表单

<form ua-signup ua-error="error-msg">
  <input name="first_name" placeholder="Your name"><br>
  <input name="login" ua-is-email placeholder="Email"><br>
  <input name="password" placeholder="Password" type="password"><br>
  <button type="submit">Create account</button>
  <p id="error-msg"></p>
</form>

如何指定哪些路线应该是公开的，以及哪条路线是登录表单：
```
$routeProvider.when('/login', {templateUrl: 'partials/login.html', public: true, login: true});
$routeProvider.when('/signup', {templateUrl: 'partials/signup.html', public: true});
```
.otherwise()路由应设置为您希望用户在登录后重定向到的位置。例如：

$routeProvider.otherwise({redirectTo: '/home'});
退出链接：

<a href="#" ua-logout>Log Out</a>

（结束会话并重定向到登录路线）
访问用户属性：

使用user服务访问用户属性，例如：user.current.email

或在模板中：<span>{{ user.email }}</span>
隐藏仅在登录时可见的元素：

<div ng-show="user.authorized">Welcome {{ user.first_name }}!</div>
根据权限显示元素：

<div ua-has-permission="admin">You are an admin</div>

要对后端服务进行身份验证，只需使用user.token()获取会话令牌并使用AJAX请求发送它。在后端，使用UserApp API（如果您使用UserApp）检查令牌是否有效。

如果您需要任何帮助，请告诉我：）

Answer 2

尝试阅读this article。

我使用的方法是考虑不同的身份验证层（webapp和webservice），并仅考虑Web服务中的真实身份验证。 Webapp只是在用户身份验证的情况下表现出来。

希望这有帮助。

AngularJS使用RESTful Web服务身份验证

2 个答案: