Angularjs里手输 templateUrl 跳转问题

Question

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

Answer 1

让【道友老李】来帮你解答，本回答参考gpt编写，并整理提供，如果还有疑问可以点击头像关注私信或评论。

如果答案让您满意，请采纳、关注，非常感谢！

回答如下：

1. 校验未登录时跳转到登录页面的方法： 在AngularJS中可以使用路由拦截器（Route Interceptors）来实现未登录时跳转到登录页面的校验。具体步骤如下：
2. 在路由配置中添加一个拦截器，在拦截器中判断用户是否已登录，若未登录则跳转到登录页面。
3. 在拦截器中使用$location服务来进行页面跳转。 示例代码如下：

app.config(function ($routeProvider, $httpProvider) {
  $httpProvider.interceptors.push(function ($q, $location) {
    return {
      'request': function (config) {
        // 在此处判断用户是否已登录，若未登录则跳转到登录页面
        if (!isLoggedIn()) {
          $location.path('/login');
        }
        return config;
      }
    };
  });
  $routeProvider
    .when('/home', {
      templateUrl: 'templates/home.html'
    })
    .when('/login', {
      templateUrl: 'templates/login.html'
    })
    .otherwise({redirectTo: '/home'});
});

1. 为什么没有触发$routeChangeStart事件： $routeChangeStart事件是在路由改变之前触发的，如果直接手动在地址栏输入templateUrl，在改变路由的过程中并不会触发这个事件。如果希望在手动输入地址时也触发事件，可以考虑在$routeProvider中使用$routeChangeStart事件来实现校验逻辑。 示例代码如下：

app.run(function($rootScope, $location) {
  $rootScope.$on('$routeChangeStart', function(event, next, current) {
    // 在此处进行未登录校验逻辑
    if (!isLoggedIn()) {
      $location.path('/login');
    }
  });
});

希望以上回答能帮助您解决问题，如有任何疑问请随时告诉我。感谢！