AngularJS不拦截来自地址栏的直接请求

问题描述

我正在创建一个使用JWT令牌进行身份验证的AngularJS应用程序。该令牌正在使用AngularJS拦截器传递，如下所示。

 'request'：function（config）
 { 
 if（store.get（'jwt_token'）！= null）
 {
 config.headers ['x-access-token'] = store.get（'jwt_token'）; 
} 
 else 
 {
 config.headers ['x-access-token'] =''; 
} 
 
 return config; 
} 
  

每当我访问任何 /限制 页面，一切都正常。问题是当我打开 /限制 页面时，直接在地址栏中键入URL（或刷新页面）， AngularJS被绕过，因此拦截器不会拦截请求，令牌不被传递。

我一直在搜索一段时间，我发现一些解决方案就像使用加载AngularJS的一段代码进行响应，然后从那里重定向。但是，如果可能，我正在寻找一种更简单/更简单的方法，因为我可能会在这里缺少某些东西。

我可以检测到请求由于我总是传递它（来自用户没有认证的空值），因此通过检查 x-access-token 来自AngularJS。 。

解决方案

Alex的回答正在指出确切的问题，谢谢Alex

我昨天终于明白了。我去的解决方案是确保所有的请求都来自AngularJS，我有一个限制页面的列表，如果有任何请求，我正在调用一个函数来验证和验证服务器端的JWT令牌，如果它是有效的，继续，否则，去登录页面。 关键是要确保所有请求都应该转到index.html以确保AngularJS正在处理路由。

此链接帮助我非常想解决这个问题。

解决方案

听起来好像Angular的路由器和服务器端点之间有混淆。

您可能会在导航时触发$ http配置通过应用程序，使用Angular的路由器跟踪的URL（可以正常工作），而 / restricted URL是服务器 URL。

$因此，当您在Angular应用程序（浏览器）之外要求任何 / restricted 时，它将直接发送请求服务器，而不是通过Angular路由器或应用程序。

基本上，您需要在Angular应用程序中创建位于受限制的上下文中的路由，当初始化时，运行$ http配置。除了 index.html （ / ）之外，您不应该直接在地址栏中调用服务器端点。

我建议有一个Angular路线叫做 / restricted-area ，以便用户点击它将始终使用$ http方法，通过专门的Angular路由，通过控制器在内部调用服务器的 / restricted 端点。

I'm creating an AngularJS application that uses the JWT token for authentication. The token is being passed using the AngularJS interceptor as shown below.

'request': function(config)
        {
            if (store.get('jwt_token') != null)
            {
                config.headers['x-access-token'] = store.get('jwt_token');
            }
            else
            {
                config.headers['x-access-token'] = '';
            }

            return config;
        }

Whenever I'm accessing any /restricted pages, everything is working fine. The issue is when I'm going to the /restricted page by directly typing the URL in the address bar (or refreshing the page), the AngularJS gets circumvented, and hence, the Interceptors don't intercept the request, and the token is not passed.

I've been searching for a while, I found some solutions like responding with a piece of code that loads the AngularJS then makes a redirect from there. However, I'm looking for a simpler/neater approach if possible as I might be missing something here.

I can detect if the request came from AngularJS or not by checking for the x-access-token since I'm always passing it (empty value if user is not authenticated).

Solution

Alex's answer is pointing to the exact problem, thanks Alex.

I finally figured it out yesterday. The solution I went with was to make sure all the requests come from AngularJS, I have a list of the restricted pages, if any of them is requested, I'm calling a function to verify and validate the JWT token on server side, if it's valid, proceed, otherwise, go to login page. The key thing is to ensure that ALL requests should go to the index.html to make sure AngularJS is handling the routing.

This link helped me greatly to solve this issue.

http://arthur.gonigberg.com/2013/06/29/angularjs-role-based-auth/

解决方案

It sounds as if there's a confusion between Angular's router and server endpoints.

You are presumably triggering the $http configuration while navigating through the application, using URL's tracked by Angular's router (which works fine), whereas the /restricted URLs are server URLs.

Therefore, when you ask for anything /restricted outside of the Angular app (in the browser), it is sending the request straight to the server, and not via the Angular router or application.

Basically, you need to create routes in your Angular app that are within the restricted context, that when initialized, run the $http configuration. You should never be calling server end-points directly in the address bar, except for index.html (/).

I'd suggest having an Angular route called /restricted-area so that when a user hits it, it will always use the $http methods you have, by being a dedicated Angular route, calling the server's /restricted endpoint internally, via a controller.

这篇关于AngularJS不拦截来自地址栏的直接请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！