title: Login Logout Session in spring mvc
body: <p>I am trying to implement Login Logout functionality for my project website. I'm making SPA. what is the best way to make login/logout global i.e. if I click on any other link like contact us or about us after logging in logout remains till clicked? Where I'm going wrong How to correct it? 
  What logic shall I apply so that logout remains till the end?
  I have used javascript to change login button to logout</p>
  
  <p>What I want to know is how do I get a login/logout button to display across the entire portal and our unauthenticated site based on if the user is logged in or out? Is it possible for me to execute my code on the header somehow? Or do you have any other suggestions? Currently when I click on signin button then value of temp is passed true and logout button is displayed but now when I click on any other page like about us value of temp hasn't been passed true ..so how to do this across complete portal?</p>
  
  <p><strong>UserController.java</strong></p>
  
  <pre><code>@RequestMapping("/login")
      public ModelAndView loginHere() {
          log.debug("Starting of the method loginHere");
          System.out.println("loginHere");
          ModelAndView mv = new ModelAndView("/home");
          mv.addObject("user", user);
          mv.addObject("isUserClickedLoginHere", "true");
          mv.addObject("message", "Welcome to login page");
          log.debug("Ending of the method loginHere");
          System.out.println("Ending login here");
  
          return mv;
      }
  
      @RequestMapping(value = "/validate", method = RequestMethod.GET)
      public ModelAndView validate(@RequestParam(value = "username") String userID,
              @RequestParam(value = "password") String password) {
          log.debug("Starting of the method validate");
          System.out.println("validate");
  
          ModelAndView mv = new ModelAndView("/home");
  
          user = userDAO.validate(userID, password);
          // if the record exist with this userID and password it will return user
          // details else will return null
          if (user != null) {
              log.debug("Valid Credentials");
  
              session = req.getSession();  
  /*          session.setMaxInactiveInterval(1*10);
  */          
  
              session.setAttribute("loggedInUser", user.getName());
              session.setAttribute("loggedInUserID", user.getUsername());
  
              session.setAttribute("user", user);
  
              mv.addObject("homePagee", "true");
              mv.addObject("temp", "true");
  
              if (user.getRole().equals("ROLE_ADMIN")) {
                  log.debug("Logged in as Admin");
                  mv.addObject("isAdmin", "true");
                  /*
                   * session.setAttribute("supplier", supplier);
                   * session.setAttribute("supplierList", supplierDAO.list());
                   * 
                   * session.setAttribute("category", category);
                   * session.setAttribute("categoryList", categoryDAO.list());
                   */
  
              } else {
                  log.debug("Logged in as User");
                  mv.addObject("isAdmin", "false");
  
                  // myCart = cartDAO.list(userID);
                  /*
                   * mv.addObject("myCart", myCart); // Fetch the myCart list
                   * based on user ID List&lt;MyCart&gt; cartList =
                   * cartDAO.list(userID); mv.addObject("cartList", cartList);
                   * mv.addObject("cartSize", cartList.size());
                   */
              }
  
          } else {
              log.debug("Invalid Credentials");
  
              mv.addObject("invalidCredentials", "true");
              mv.addObject("errorMessage", "Invalid Credentials");
  
          }
          log.debug("Ending of the method validate");
          return mv;
      }
  
  @RequestMapping("/logout")
  public ModelAndView logout(HttpServletRequest request, HttpServletResponse response) {
      log.debug("Starting of the method logout");
      System.out.println("Starting of the method logout");
  
      ModelAndView mv = new ModelAndView("/home");
      session.invalidate();
      session = request.getSession(true);
      mv.addObject("homePagee", "true");
      mv.addObject("temp1", "true");
  
      Authentication auth = SecurityContextHolder.getContext().getAuthentication();
  
      if (auth != null) {
          new SecurityContextLogoutHandler().logout(request, response, auth);
      }
      System.out.println("Ending of the method logout");
  
      log.debug("Ending of the method logout");
      return mv;
      // return "redirect:/login?logout";
  
  }
  </code></pre>
  
  <p><strong>Logout.JSP</strong></p>
  
  <pre><code>&lt;c:if test="${temp}"&gt;
          &lt;script type="text/javascript"&gt;
              /* var loginbtn =  document.getElementById("login-btn");
              var signupbtn = document.getElementById("signup-btn");
              var myaccountbtn = document.getElementById("logout-btn");
              signupbtn.innerHTML = "";
              loginbtn.innerHTML = "";
              myaccountbtn.style.display = "block";
               */
              /*          loginbtn.href = "logout";
               */         
  
          &lt;/script&gt;
      &lt;/c:if&gt;
       &lt;c:if test="${temp1}"&gt;
                  &lt;script&gt;
                      var loginbtn = document.getElementById("login-btn")
                      var signupbtn = document.getElementById("signup-btn")
                      var myaccountbtn = document.getElementById("logout-btn");
  
                      loginbtn.innerhtml  = "Login";
                      signupbtn.innerHTML = "Signup";
                      loginbtn.href = "login";
                      myaccountbtn.style.display = "none";
  
                  &lt;/script&gt;
  
          &lt;/c:if&gt;
  </code></pre>
  
  <p><strong>Login.jsp</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
          &lt;div class="card card-container"&gt;
              &lt;!-- &lt;img class="profile-img-card" src="//lh3.googleusercontent.com/-6V8xOA6M7BA/AAAAAAAAAAI/AAAAAAAAAAA/rzlHcD0KYwo/photo.jpg?sz=120" alt="" /&gt; --&gt;
              &lt;img id="profile-img" class="profile-img-card"
                  src="//ssl.gstatic.com/accounts/ui/avatar_2x.png" /&gt;
              &lt;p id="profile-name" class="profile-name-card"&gt;&lt;/p&gt;
              &lt;form class="form-signin" action="validate"&gt;
                  &lt;span id="reauth-email" class="reauth-email"&gt;&lt;/span&gt; &lt;input
                      type="username" name="username" id="inputEmail"
                      class="form-control" placeholder="Username" required autofocus&gt;
                  &lt;input type="password" name="password" id="inputPassword"
                      class="form-control" placeholder="Password" required&gt; &lt;input
                      type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" /&gt;
                  &lt;div id="remember" class="checkbox"&gt;
                      &lt;label&gt; &lt;input type="checkbox" value="remember-me"&gt;
                          Remember me
                      &lt;/label&gt;
                  &lt;/div&gt;
                  &lt;button class="btn btn-lg btn-primary btn-block btn-signin"
                      type="submit"&gt;Sign in&lt;/button&gt;
              &lt;/form&gt;
              &lt;!-- /form --&gt;
              &lt;a href="#" class="forgot-password"&gt; Forgot the password? &lt;/a&gt;
          &lt;/div&gt;
          &lt;!-- /card-container --&gt;
      &lt;/div&gt;
      &lt;!-- /container --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Header.jsp</strong></p>
  
  <pre><code>&lt;li class="upper-links"&gt;&lt;a class="links" id="signup-btn"
                      href="register"&gt;Signup&lt;/a&gt;&lt;/li&gt;
  
                  &lt;li class="upper-links"&gt;&lt;a class="links" id="login-btn"
                      href="login"&gt;Login&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="upper-links dropdown"&gt;&lt;a
                      class="dropdown-toggle links" data-toggle="dropdown" role="button"
                      aria-haspopup="true" aria-expanded="false" id="logout-btn"
                      href="loginHere"  style="display: none;"&gt;My Account&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                      &lt;ul class="dropdown-menu" style="width: 40%;"&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Account&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Orders&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Wishlist&lt;/a&gt;&lt;/li&gt;
                          &lt;li role="separator" class="divider"&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="logout"&gt;Logout&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;&lt;/li&gt;
  </code></pre>