How to prevent direct HTML access in Angularjs 1.x?
code:
$stateProvider.state('home', {
url: "/",
templateUrl: 'views/home.html',
title: 'Home',
controller: 'homeCtrl as home',
})
In browser
http://example.com/views/home.html in this case, my HTML file rendered in the browser
From a .state, you can only prevent the user from accessing your state by using resolve and rejecting the promise
.state('home', {
url: "/",
templateUrl: 'views/home.html',
title: 'Home',
controller: 'homeCtrl as home',
resolve: {
isAutherized: function($q) {
// some logic goes here i guess...
return $q.reject("You shell not pass");
}
}
})
This will fail transition, and by result will not access that specific HTML
Here's a good solution https://solidfoundationwebdev.com/blog/posts/require-authentication-for-certain-routes-with-ui-router-in-angularjs
In general you should listen to $stateChangeStart event and check whether you got specific privileges to your destination or not and prevent it from change by for example making redirect.
angular.module("myApp").run(function ($rootScope, $state, AuthService) {
$rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams){
if (toState.authenticate && !AuthService.isAuthenticated()){
// User isn’t authenticated
$state.transitionTo("login");
event.preventDefault();
}
});
});
