Is it possible to intercept html, css and js files used in angularjs?

问题

I have already created an http interceptor and based on my observation, it only applies to all that uses $http service. What if I want to intercept even the css, html and js files used in the template? Is it possible?

This is the code of the interceptor I mentioned above:

app.factory('redirectInterceptor', function($q,$location,$window){
return  {
    'response':function(response){
    if (typeof response.data === 'string' && response.data.indexOf("My Login Page")>-1) {
        $window.location.href = "/login.html";
        return $q.reject(response);
    }else{
        return response;
    }
    }
}

});

app.config(['$httpProvider',function($httpProvider) {
    $httpProvider.interceptors.push('redirectInterceptor');
}]);

I want to be able to do an interceptor for css, html and js (for template) just like the one above.

回答1:

As you said,

it only applies to all that uses $http service

So, if you want to intercept the requests for html,css and js files. It is best done on the server, rather than the client.

回答2:

you can intercept html files

    var requestInterceptor = function (config) {

        if (config.url.indexOf(".html") != -1) {
            //custom logic
        }
   }

though above does not work with .js or .css because they are loading using tag.

.html files are saved in template-cache and fires $http requests...

though you should go ahead and test what all being requested by doing console.log(config.url) in the interceptor to be sure..

回答3:

This is a classic X-Y problem. You're thinking of a solution to your problem but it's the wrong way to go about it.

This line, from your comment, explains the actual problem:

but the js files that I'm referring to are the business logic of the project. So making it public is not an option.

So, your problem is you don't want to expose business logic to people who haven't/can't login.

There are several solutions to this. But it all boils down to one thing: separate your business logic from common js code used for UI etc.

Once you've separated your js into two parts (not necessarily two files but it must be at least two files, it can be more) you can expose your common js file(s) as public. Then you can decide how to handle loading your business logic:

Letting it Fail

This is probably the simplest strategy. Just do nothing and it will fail to load. Presumably you only need your business logic on logged-in pages so not having it in the landing or login pages should not be an issue.
Dynamicly Include it in the Template

Just omit the script tag that loads the business logic js if user is not logged in.
Load Business Logic Dynamically in JS

Either load it using AJAX then eval it or use require.js or use jQuery getScript() or something similar to load the business logic only when the user is logged in.

If you're creative you can probably come up with a couple more ways to handle loading the business logic JS. Whatever it is, the key is you need to make the common js and css files public.

来源：https://stackoverflow.com/questions/29641659/is-it-possible-to-intercept-html-css-and-js-files-used-in-angularjs

标签

angularjs

angular-http-interceptors