如何在 Angular JS 应用程序中处理身份验证 [英] How to handle authentication in Angular JS application

问题描述

我正在我的 angular js 应用程序中实现一个身份验证系统.

我的计划如下:

1. 获取用户信息(登录表单中的姓名和密码)
2. 检查用户是否存在
3. 如果存在服务器响应会话 cookie，前端将重定向到某个页面.
4. 然后用户将执行一些将生成 API 请求的任务
5. API 请求应包含在第 3 步中发送的 cookie 信息
6. 服务器检查是否生成了 cookie，如果找到 cookie，则响应 API 请求结果.在我的服务中，我正在做类似
的事情

<前>MyApp.service('myAuth', function($http, $q) {this.authHeader = null;this.checkAuth = function(){//做api调用，如果成功设置 this.authHeader = response}this.isAuthenticaed = function(){this.authHeader ?返回 this.authHeder :返回假；}

提交登录表单后，我将调用 checkAuth 并从我的服务器取回我的会话 cookie，如何在执行下一次 REST 调用时添加 cookie 信息，以及何时用户在登录后在整个应用程序中导航我确实想要每次检查 isAuthenticaed 是真还是假，在 Angularjs 中，当它导航到另一个页面时，它会在第一次调用时将其设置为真后重置吗?我的方法 1-6 好还是您有任何具体建议?顺便说一句，我检查了以前的条目，但那些不是我想知道的.

解决方案

我不确定你的后端，但我会这样做

• 创建一个单独的登录页面(专用网址不是角度子视图或模态对话框).
• 如果用户未通过身份验证重定向到此登录页.这是通过服务器重定向完成的.此页面可能会或可能不会使用角度框架，因为它只涉及发送用户\密码到服务器.
• 从登录页面发出 POST(不是 AJAX 请求)，并在服务器上进行验证.
• 在服务器上设置 auth cookie.(不同的框架以不同的方式执行此操作.ASP.Net 设置表单身份验证 cookie.)
• 用户通过身份验证后，将用户重定向到实际的 Angular 应用并加载其所有组件.

这节省了在 Angular 中管理客户端身份验证所需的任何代码.如果用户登陆此页面，他将通过身份验证并拥有 cookie.

此外，默认浏览器行为是在每个请求中发送与域关联的所有 cookie，因此您不必担心 angular 是否发送了一些 cookie.

I am implementing an auth system in my angular js app.

What I am planning it like below:

1. Get user info(name and pass from login form)
2. Check whether user exists or not
3. if exists server respond with a session cookie and frontend will redirect to a certain page.
4. then user will do some task which will generate API request
5. API request should have cookie information that was sent on step 3
6. server check whether the cookie was generated or not and if cookie was found then respond with the API request results. And in my service I am doing something like

    MyApp.service('myAuth', function($http, $q) {
        this.authHeader = null;
        this.checkAuth = function(){
        //do api call and if success sets this.authHeader = response
        }
        this.isAuthenticaed = function(){
            this.authHeader ? return this.authHeder  : return false;
       }

After submitting the login form I will call checkAuth and get my session cookie back from my server, how I can add the cookie information while doing the next REST call and also when user will navigate throughout the application after log in I do want to check each time isAuthenticaed true or false, in Angularjs when it will navigate to another page does it resets after setting it true from the first call? And is my approach 1-6 good or do you have any specific suggestions? Btw I checked previous so entries but those are not what I want to know.

解决方案

I am not sure about your backend, but this is how I would do it

• Create a separate login page (dedicated url not angular sub view or modal dialog).
• If the user is not authenticated redirect to this login page. This is done by server redirects. This page may or may not use angular framework, as it just involves sending a user\password to server.
• Make a POST (not AJAX request) from the login page, and verify on server.
• On the server set the auth cookie. (Different frameworks do it differently. ASP.Net sets form authentication cookie.)
• Once the user is authenticated redirect user to the actual angular app and load all its components.

This saves any code require to manage authentication on client side in Angular. If the user lands on this page he is authenticated and has the cookie.

Also default browser behavior is to send all cookies associated with a domain with each request, so you don't have to worry if angular is sending some cookie or not.

这篇关于如何在 Angular JS 应用程序中处理身份验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！