If the user has become logged out, I want to send the user to the login page, but it fails. I have this configuration:
webShopApp.config(function($routeProvider) {
$routeProvider.when('/login', {
templateUrl: 'partials/login.html',
controller: 'LoginController'
});
$routeProvider.when('/:id?/?products', {
templateUrl: 'partials/products.html',
controller: 'MenuController'
});
});
Note the "/:id?/?" inte the code for products. Let's say the url is 'index.html#/45/products'. If the controller discovers that the user is logged out, it calls
$location.path('/login');
If I console.log the $location.path(), it says '/login' as expected, but the url in the browser is 'index.html#/45/login'. Why is the '45' (the id) still there, and how do I get rid of it, ie, redirect to 'index.html#/login' without the id from the previous path?
I guess you should use window.location = 'yourUrl'; instead of $location.path('/login'); in this case. But in this case, the page is reloaded.
see if you need to workout in pure angularjs, so please avoid javascript terms and jquery terms i.e. windows.location and $location.path; Better option is always to route the user to login page whenever the user gets logout from the App.
for this you can specify it at the routing level i.e.
$routeProvider.otherwise({redirectTo: "/login"});
or you can say a logout link on clicking of which user will be redirected to login page
$routeProvider.when('/logout', {
templateUrl: 'partials/login.html',
controller: 'LoginController'
});
I hope this may help.
Related
In my app there's a certain wizard with several steps the user must finish before using the app. Each step certain data is begin added to an array. How can I use this in order to determine how many steps the user finished before getting to the final page? Can I force redirect him to the step he skipped from? E.g typed the url to the final page.
This is my route config code:
app.config(function ($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "homePage.html",
controller: "homeController"
})
.when("/summary", {
templateUrl: "summary.html",
controller: "summaryController"
})
.when("/step/:index", {
templateUrl: "/step/stepPage.html",
controller: "stepController"
})
.otherwise({
redirectTo: "/"
})
});
In the summary page I tried something like this to determine how did the user get to this page. If length of array is 5 then he went through all steps, if less, redirect him back to where he left.
if(dataArray.length<5){
$location.path( "/step/"+dataArray.length );
}
This approach always gets me back to the root URL "/". Why?
Currently I have $routeProvider.otherwise configured to go to a page behind the login, and if that page does not resolve, they go to the login screen. I would like an additional redirection to an error page when an XHR fails that is meant to redirect the user to a success page. I have found that if I register a listener on routeChangeError to redirect to /error instead of the defaults, the .otherwise is overridden and all mistyped links take the user to the error page. Does angular provide anything that allows for this? Or maybe I missed something in my code? I can write it if angular doesn't provide it, but I'm just wondering if there is a feature native to the framework.
$rootScope.$on("$routeChangeError", function () {
$location.path("/login")
})
app.config(['$routeProvider', function ($routeProvider, $route) {
$routeProvider.
when('/error', {
templateUrl: 'error.html',
controller: 'Error',
controllerAs: 'error'
}).
when('/status-info', {
templateUrl: 'status-page.html',
controller: 'StatusInfoController',
resolve: {
auth: function (SessionService) {
return SessionService.resolve()
}
}
}).
when('/', {
redirectTo: '/status-info'
}).
otherwise({
redirectTo: '/'
})
Additional info
The desired outcome is a website that responds to incorrect URLs in the usual way - defaulting to a specific page behind login or login if not authenticated, but with the extra twist of having a special error page for rejected $route.resolve() promises.
I would love to write a plunkr for you, but I can't get to it tonight. We're launching the beta this weekend! I don't necessarily need code if you can just set me in the right direction. Any help you can offer would be great.
I have a route defines as follows:
$routeProvider.
when('/projects/', {
controller: 'ProjectCtrl',
controllerAs: 'project_ctrl',
templateUrl: '/static/app/partials/project.html'
}).
After the login finishes I need the user to land on this link, hence in my controller I am using this:
vm.login = function(form) {
if (form.$valid) {
loginService.login(vm.loginFormData.username, vm.loginFormData.password);
loginService.setUpUser()
$location.url("/projects");
}
}
But unfortunately the controller associated with this view is not triggered, that is ProjectCtrl is not triggered. However when I click on the navigation link which uses in the dom, it works fine. Can someone please guide me here, may I am missing something conceptual.
Hence the larger question is how do I redirect a user in the controller using some APIs which also complies with ngRoute based controllers.
Try removing the last / in url so it matches $location.url("/projects");
$routeProvider.
when('/projects', {
I'm using angular-ui-router with HTML5 mode set to false - I use hashbang. When user hits mydomain.com I need to redirect him to mydomain.com/#/welcome, how can I do that?
I've looked through ui-router source code and when mydomain.com is hit the $location.path() is "" so this approach .when("", "/welcome") doesn't work since .when("" translates into this /^$/ regex and when "" is tested against this regex null is returned.
This seems to be a viable solution:
appModule.run(['$location', function ($location) {
if ($location.path() === "") {
$location.path("/");
}
Use $urlRouterProvider.otherwise to redirect to your welcome page if the current URL doesn't match any of your states.
$urlRouterProvider.otherwise('/welcome');
See this stack overflow question: Otherwise on StateProvider
If you just want to show welcome.html you can do something like below
.when('/', {
templateUrl: 'welcome.html',
controller: 'homeCtrl'
})
Else if you want to redirect user to mydomain.com/#/welcome you can use window.locations or you can handle it as the part of homeCtrl where you can redirect it using $location.path('/welcome'); and below be route for it
.when('/welcome', {
templateUrl: 'welcome.html',
controller: 'welcomeCtrl'
})
I have set up my routing in Angular and all works fine:
$locationProvider.html5Mode(true);
$routeProvider.
when('/', { templateUrl: '/Home/Index' }).
when('/User', { templateUrl: '/User/Index' });
However I now have an anchor tag to work as a logout button which will just redirect the user to /User/Logout, and logout will then log the user out and redirect them to the login page. So what I want is for angular js to just ignore this specific route and allow it to do a normal http redirect. This seems like something that should be really easy but I haven't been able to find a solution to the problem.
I know I could do a click event and do a window.location change in the click event but that seems like a really hacky way to do it.
specify target="_self" in your anchors, so that angularjs does not rewrite URLs. See the discussion here: http://docs.angularjs.org/guide/$location
You could use a function with redirectTo also:
.when('/User/Logout', {
redirectTo: function(obj,path,search) {
window.location.href=path;
}
})