Angularjs里手输 templateUrl 跳转问题

Question

请问一下： Angularjs框架，在未登录的情况下，手动在地址栏输入项目的某个templateUrl，会跳转到乱码页面。（我在登录状态下，输入templateUrl，跳转也会乱码）
（手动输入时，并没有触发$routeChangeStart。(这个方法是写在main.js里的一个控制器里。用的也是$scope.$on）
所以想请问下，如何 校验它未登录时，跳转到登录页面？ 以及为什么没有触发？谢谢

Answer 1

在AngularJS中，你可以使用路由守卫（route guards）来校验用户是否已登录并进行相应的跳转。路由守卫是用来在路由切换之前检查某些条件的一种机制。

在你的情况下，当用户手动在地址栏输入某个templateUrl时，并且未登录时，可以使用路由守卫来检查用户的登录状态并进行跳转到登录页面。

首先，你需要定义一个路由守卫函数，用来检查用户是否已登录。例如：

app.run(['$rootScope', '$location', function($rootScope, $location) {
  $rootScope.$on('$routeChangeStart', function(event, next, current) {
    // 检查用户是否已登录
    var isLoggedIn = ... // 根据你的登录逻辑进行判断，返回 true 或 false

    // 如果未登录且要访问的页面不是登录页面，则进行跳转
    if (!isLoggedIn && next.templateUrl !== 'login.html') {
      $location.path('/login'); // 跳转到登录页面
    }
  });
}]);

这段代码将会监听$routeChangeStart事件，并在路由即将切换时进行检查。如果用户未登录且要访问的页面不是登录页面，将会使用$location.path()方法跳转到登录页面。

另外，关于你提到的手动输入地址栏时没有触发$routeChangeStart事件的问题，可能是因为在地址栏输入时，并没有进行路由的切换。$routeChangeStart事件是在路由切换时触发的，而手动输入地址栏时并没有切换路由，所以不会触发该事件。在这种情况下，你可以在应用的初始化阶段进行一次登录状态的检查，以确保用户在未登录状态下无法访问需要登录的页面。