Angularjs + 拦截器 + 只为 http 请求添加查询参数（不是 html,js,css 文件）

Question

我正在使用 angularjs，在后端我检查每个 api 已验证。每个请求都应该检查参数 access_token.

$provide.factory('MyHttpInterceptor', function($q, $location, $localStorage) {
    return {
        request : function(config) {
            config.params = config.params || {};
            if ($localStorage.access_token) {
                config.params.access_token = $localStorage.access_token;
            }
            return config || $q.when(config);
        },
    };
});

// Add the interceptor to the $httpProvider.
$httpProvider.interceptors.push('MyHttpInterceptor');

我正在使用此代码。效果很好，但是我在开发工具（网络）中看到html，css，js文件也添加了参数。喜欢。

http://localhost/webapp/views/template/left-menu.html?access_token=xxxxxxxxxxxxxxxxx
http://localhost/webapp/css/index.css?access_token=xxxxxxxxxxxxxxxxx

但是我不喜欢发送access_token给所有的http请求(html,css,js)。

我喜欢发送 access_token 因为有前缀 api

http://localhost:9090/api/user/get?access_token=xxxxxxxxxxxxxxxxxxxxxx

//I think the solution is find the http url and grep the text api, if found means add the parameter. Don't konw this is good approach.

Please me the good approach.

我希望只有后端 api 请求。另外我不希望每个 serive http 请求都添加参数。

是否可以在配置中添加一个公共位置？

Answer 1

你可以查看url:

$provide.factory('MyHttpInterceptor', function($q, $location, $localStorage) {
return {
    request : function(config) {
        var apiPattern = /\/api\//;

        config.params = config.params || {};

        if ($localStorage.access_token && apiPattern.test(config.url)) {
            config.params.access_token = $localStorage.access_token;
        }
        return config || $q.when(config);
    }
  };
});
// Add the interceptor to the $httpProvider.

$httpProvider.interceptors.push('MyHttpInterceptor');

Angularjs + 拦截器 + 只为 http 请求添加查询参数（不是 html,js,css 文件）

Angularjs + interceptors + add query parameters for only http request( not html,js,css files)

factory

http

interceptor

angularjs