back button behavior in angular js application

Question

I have an issue with a SPA app written in angularJS. The application consist of thre views - login view, main view and log out view.

myapp/#/login
myapp/#/main
myapp/#/logout

my route provider:

function Router($routeProvider) {
    $routeProvider
        .when('/login', {
            templateUrl: 'app/components/login/login.tmpl.html',
            controller: 'login.ctrl',
            controllerAs: 'vm'
        })
        .when('/main', {
            templateUrl: 'app/components/dashboard/main.tmpl.html',
            controller: 'dashboard.ctrl',
            controllerAs: 'vm'
        })
        .when('/logout', {
            templateUrl: 'app/components/logout/logout.tmpl.html',
            controller: 'logout.ctrl',
            controllerAs: 'vm'
        })
        .otherwise({
            redirectTo: '/login'
        });
}

Use case: 1) user logs in. 2) user sees the content in the main view 3) user logs out. 4) user is redirected to the logout view for confirmation 5) user is redirected to the login view

If I press the back browser button after step 5 I am redirected to the main view. Is there a way to change the behavior of the back button when I am in the login view? I believe it is something simple and I apologize if the question is duplicated. Thank you for your time and responses!

You have to use $window.history.pushState developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/… — Avraam Mavridis
– Avraam Mavridis, Commented May 21, 2015 at 14:30
Please check this might be help you : stackoverflow.com/questions/30208454/… — User2
– User2, Commented May 21, 2015 at 14:53
@ Avraam do I have to include the $locationProvider.html5Mode(true) in order to use $window.history.pushState — skywalker
– skywalker, Commented May 21, 2015 at 15:28

User2 · Accepted Answer · 2015-05-24 07:32:33Z

1

Please see working example: http://plnkr.co/edit/46O0znC5HFDE4cYXSm5h?p=preview

Stored data in cookies in login function as follows,

$cookies.userinfo = {
    'id': 1,
    'name': 'pqr'
};

And on logout remove that data -

delete $cookies.userinfo;

then check for 'angular.isDefined($cookies.userinfo)' (userinfo is cookie name which given at the time of storing data in it) if find then redirect it to your page which you want to see after login. i.e

app.run(function ($cookies) {
      $rootScope.$on("$routeChangeStart", function () {
        if (angular.isDefined($cookies.userinfo)) {
            $location.path("/pathname");
        }

      });
});

edited May 24, 2015 at 7:32

answered May 21, 2015 at 14:52

User2

1,3038 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

skywalker Over a year ago

how can I get the cookie for the specific user :?

skywalker Over a year ago

and btw this service is deprecated docs.angularjs.org/api/ngCookies/service/$cookieStore

User2 Over a year ago

Then use $cookies and apply the same. For 1st question answer is - Store user information while user is login(i.e in login controller using put method of cookies) in cookies and use that information in above code.

skywalker Over a year ago

here is my suggestion: function login(user) { $cookies.put('1', 'userinfo'); } But for some reason it produces an error.

User2 Over a year ago

Please check I have updated my answer and also created example wor you. Try back button click on plunker I have created.

Collectives™ on Stack Overflow

back button behavior in angular js application

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related