如何防止Angularjs 1.x中的直接HTML访问？

Posted 2021-04-17

如何防止Angularjs 1.x中的直接html访问？

码：

$stateProvider.state('home', {
   url: "/",
   templateUrl: 'views/home.html',
   title: 'Home',
   controller: 'homeCtrl as home',
})

在浏览器中

在这种情况下，http://example.com/views/home.html，我的HTML文件在浏览器中呈现

答案

从.state，您只能通过使用resolve并拒绝承诺来阻止用户访问您的州

.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");
            }
        }
    })

这将失败转换，并且结果将无法访问该特定HTML

另一答案

这是一个很好的解决方案https://solidfoundationwebdev.com/blog/posts/require-authentication-for-certain-routes-with-ui-router-in-angularjs

通常，您应该监听$ stateChangeStart事件，并检查您是否获得了目标的特定权限，并通过例如进行重定向来防止更改。

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(); 
    }
  });
});