8

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

当他们第一次访问应用程序时，他们会被重定向到登录页面 ( http://domain.my:3000/login )。当用户输入他的用户名和密码时，将调用一个 web 服务（http://domain.my:4788/WebServices/user/login?username=XXX&password=YYYY），它返回带有用户 ID、名称等的 JSON 数据。这需要存储在某个地方（cookies/localstorage？）。

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

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

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

我已经使用本地策略或https://github.com/fnakstad/angular-client-side-auth之类的示例研究了 Passport 的内容，但我认为它们没有涵盖我想要实现的目标或者我不能简单地理解它们。

我希望这不是一个太笼统的问题，并提前感谢您的任何答复。

4

2 回答 2

4

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

我已经为UserApp编写了一个AngularJS 模块，它几乎可以满足您的需求。您可以：

  1. 修改模块并将函数附加到您自己的 API，或
  2. 将该模块与UserApp（基于云的用户管理 API）一起使用

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

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

如果您使用 UserApp，则不必为用户内容编写任何服务器端代码（不仅仅是验证令牌）。参加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）来检查令牌是否有效。

如果您需要任何帮助，请告诉我 :)

于 2013-12-17T13:16:14.243 回答
3

尝试阅读这篇文章。

我使用的方法是考虑不同层的身份验证（webapp 和 webservice），并且只在 webservice 中考虑真正的身份验证。在身份验证的情况下，Webapp 的行为就像用户期望的那样。

希望这可以帮助。

于 2013-07-17T17:17:20.127 回答