Аутентификация маршрута AngularJs

Question

Проблема в том, что я хотел бы ограничить доступ к определенным маршрутам и показать страницу входа, если у пользователя нет действительного JWT. Я просто хочу сказать, что я очень новичок в AngularJs и NodeJs. Так короче у меня есть

LoginCtrl:

$scope.login = function(username, password){ 

UserSvc.login(username, password) 
.then(function(response){ 
    $scope.$emit('login', response.data); 
    $window.location.href = '#/'; 
}, function(resp){ 
    $scope.loginError = resp.data.errors; 
});  
} 

встаю событие, в ApplicationCtrl событие пойманной этим

$scope.$on('login', function(_, user){ 
    $scope.currentUser = user 
}) 

это круто, и это работает идеально, проблема заключается в том, что У меня есть несколько маршрутов в моем route.js, на котором я хотел бы получить некоторую проверку.

$routeProvider 
.when('/', {controller:'PostsCtrl', templateUrl: 'posts.html'}) 
.when('/register', {controller:'RegisterCtrl', templateUrl: 'register.html'}) 
.when('/login', {controller:'LoginCtrl', templateUrl: 'login.html'}) 
.otherwise({redirectTo: '/login'}); 

В nodejs Я могу легко установить промежуточное программное обеспечение, но как я могу это сделать в AngularJs. Так что теперь происходит то, что когда я приземляюсь на странице, я могу нажать логин. Он перенаправляет меня на страницу входа в систему, а затем, когда я нажимаю «Сообщения», Nodejs возвращает 401, потому что у меня нет допустимого JWT, но это отображается только в консоли. AngulrJs ничего не делает.

Answer 1

Как @SayusiAndo отметил, что вам нужно:

• http interceptor что поймает 401 статус, от вас узел сервера.
• и затем перенаправить пользователя на маршрут входа/входа, если он не вошёл в систему.
• Кроме того, вы должны отправить маркер jwt (который вы должны сохранить), используя тот же самый перехватчик.

Http перехватчик:

app.factory('AuthInterceptor', function ($window, $q) { 
return { 
    request: function(config) { 
     var token = $window.localStorage.getItem('token'); 
     if(token){ 
      config.headers.Authorization = 'Bearer ' + token; 
     } 

     return config; 
    }, 
    response: function(response) { 
     if (response.status === 401) { 
      // redirect to login. 
     } 
     return response || $q.when(response); 
    } 
}; 
}); 

// Register the AuthInterceptor. 
app.config(function ($httpProvider) { 
    $httpProvider.interceptors.push('AuthInterceptor'); 
}); 

Answer 2

Вы можете использовать событие $ routeChangeStart, которое запускается каждый раз, когда угловой входит в маршрут. Прикрепите обработчик к этому событию, и в обработчике выполните проверку, в которой вы нуждаетесь, и если она не удалась, перенаправьте пользователя.

https://docs.angularjs.org/api/ngRoute/service/ $ маршрут