If you have multiple routes and you want to control what routes are anonymous, what routes need authentication and even do some custom logic to decide whether or not the user can access a route, read below.
Add a data
field to the states you want to restrict with some information of the rule you want to apply:
myApp.config(function($stateProvider, $urlRouterProvider, $httpProvider, authProvider) {
$urlRouterProvider.otherwise('/login');
$stateProvider
.state('logout', { url: '/logout', templateUrl: 'views/logout.html', controller: 'LogoutCtrl' })
.state('login', { url: '/login', templateUrl: 'views/login.html', controller: 'LoginCtrl' })
.state('root', { url: '/', templateUrl: 'views/root.html', controller: 'RootCtrl', data: { requiresLogin: true } });
});
Then, when configuring the authProvider
just set the loginState
to the name of the state to redirect to if the user doesn't have access to a certain webpage:
myApp.config(function (authProvider) {
authProvider.init({
domain: 'yourdomain.auth0.com',
clientID: 'YOUR_CLIENT_ID',
callbackURL: 'http://localhost:1337/',
loginState: 'login' // matches login state
});
});
Then, add the requiresLogin
property in the route that requires the user to be logged in:
myApp.config(function ($routeProvider) {
$routeProvider
.when('/logout', {
templateUrl: 'views/logout.html',
controller: 'LogoutCtrl'
})
.when('/login', {
templateUrl: 'views/login.html',
controller: 'LoginCtrl'
})
.when('/', {
templateUrl: 'views/root.html',
controller: 'RootCtrl',
/* isAuthenticated will prevent user access to forbidden routes */
requiresLogin: true
})
});
Then, when configuring the authProvider
just set the loginUrl
to the name of the state to redirect to if the user doesn't have access to a certain webpage:
myApp.config(function (authProvider) {
authProvider.init({
domain: 'yourdomain.auth0.com',
clientID: 'YOUR_CLIENT_ID',
callbackURL: 'http://localhost:1337/',
loginUrl: '/login' // matches login url
});
});