我想限制用户在我的angular js应用程序中访问/ dashboard视图和/ add-item视图或任何其他视图。
这是我的路由器
app.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('login');
$stateProvider.
state('app.dashboard', {
url: '/dashboard',
templateUrl: appHelper.viewsPath('dashboard/views/dashboard'),
controller: 'DashBoardController as DashBordCtrl',
}).
// Add Item
state('app.add-item', {
url: '/add-item',
templateUrl: appHelper.viewsPath('item/views/add-item'),
controller: 'ItemController as ItemCtrl',
})
});
登录后,我将令牌存储在本地存储中。如果令牌不存在,我希望用户不访问任何视图。
这是我的登录控制器
$scope.register = function(credentials){
LoginService.post(credentials,function(success){
$state.go('app.add-item');
SessionService.set("token",success.accessToken);
},function(error){
FlashService.showError("Please Enter Valid Email Password");
});
}
}
在401错误中,我将重定向到登录页面,如下所示:
app.config(function ($httpProvider) {
// $http.defaults.headers.common.Authorization = '';
delete $httpProvider.defaults.headers.common['X-Requested-With'];
$httpProvider.interceptors.push(function ($location, $q, SessionService, FlashService) {
return {
request: function (config) {
config.headers = config.headers || {};
config.headers.Authorization = SessionService.get('token');
return config;
},
responseError: function (response) {
if (response.status === 401) {
SessionService.unset('token');
$location.path('/login');
}
return $q.reject(response);
}
};
});
});
但是如果我在url中输入/ add-item,我的add-item页面会打开然后突然关闭,因为服务器返回401,并且登录页面出现。如果用户不想打开任何视图没有登录。
我是angularjs的新手,我很困惑如何做到这一点。请帮忙。
答案 0 :(得分:0)
如果没有令牌,您可以保存用户的位置,以便在他登录后将他带回同一页面。您可以在app.js中查看以下代码:
app.config(function($stateProvider, $urlRouterProvider){
$stateProvider.
state('app.dashboard', {
url: '/dashboard',
templateUrl: appHelper.viewsPath('dashboard/views/dashboard'),
controller: 'DashBoardController as DashBordCtrl',
}).
// Add Item
state('app.add-item', {
url: '/add-item',
templateUrl: appHelper.viewsPath('item/views/add-item'),
controller: 'ItemController as ItemCtrl',
})
$urlRouterProvider.otherwise('login');
});
$ urlRouterProvider.otherwise(' login')在app.config中替换为$ urlRouterProvider.otherwise(' app / dashboard')如果是$ urlRouterProvider.otherwise(&# 39;登录'),你有一个令牌,仍然会抛出登录页面。
app.config(function ($httpProvider) {
// $http.defaults.headers.common.Authorization = '';
delete $httpProvider.defaults.headers.common['X-Requested-With'];
$httpProvider.interceptors.push(function ($location, $q, SessionService, FlashService) {
return {
request: function (config) {
config.headers = config.headers || {};
config.headers.Authorization = SessionService.get('token');
return config;
},
responseError: function (response) {
if (response.status === 401) {
SessionService.unset('token');
$location.path('/login');
}
return $q.reject(response);
}
if (!SessionService.get('token');) {
/* You can save the user's location to take him back to the same page after he has logged-in */
$rootScope.savedLocation = $location.url();
$location.path('/login');
}
};
});
});
答案 1 :(得分:0)
您应该在路线配置中使用解决。例如:
state('app.add-item', {
url: '/add-item',
templateUrl: appHelper.viewsPath('item/views/add-item'),
controller: 'ItemController as ItemCtrl',
resolve: ['SomeService', function(SomeService) {
return SomeService.getDataFromApi();
}]
})
查看此示例,如果SomeService返回401,表示错误,则该路由控制器将永远不会实例化,因此您无法访问该视图。您的拦截器仍将完成其工作,并在401发生时重定向到登录,但现在它将顺利进行并且没有视图闪烁。
这是一个很好的方法,它可以解决你的问题以及你以后可能遇到的其他问题。