title: Client side routing using jQuery/JavaScript
body: <p>I'm doing some experimenting in using pure JS/jQuery to handle client-side logic (rather than a framework, like Angular).  The problem I'm running into right now is how to log a user in.</p>
  
  <p>Here is my <code>login.hbs</code> file:</p>
  
  <pre><code>&lt;div align="center"&gt;
  &lt;h2 class="page-header"&gt;Account Login&lt;/h2&gt;
  &lt;form&gt;
    &lt;div class="form-group"&gt;
      {{!-- Username --}}
      &lt;input type="text" class="form-control" name="username" placeholder="Username" style="width: 20%"&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
      {{!-- Password --}}
      &lt;input type="password" class="form-control" name="password" placeholder="Password" style="width: 20%"&gt;
    &lt;/div&gt;
    &lt;button type="button" class="btn btn-success" onclick="login()"&gt;Login&lt;/button&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This submit request goes to a JS file: <code>login.js</code>:</p>
  
  <pre><code>$(document).ready(function() {
      login = () =&gt; {     
          var username = $("[name='username']").val()
          var password = $("[name='password']").val()
          $.ajax({
              type: "PUT",
              url: '/login',
              data: {
                  username: username,
                  password: password
              },
              success: function(response) {
                  console.log('Success:')
                  console.log(response)
              },
              error: function(error) {
                  console.log("Error:")
                  console.log(error)
              }
          })
      }
  })
  </code></pre>
  
  <p>On the server side, I'm accepting this <code>PUT</code> request in <code>index.js</code>:</p>
  
  <pre><code>router.put('/login', function(req, res) {
      // Password is not encrypted here
      console.log('req.body')
      console.log(req.body)
  
      User.findOne({ username: req.body.username }, function(err, user) {
          // Password is encrypted here
          if (err) throw err
          console.log('user')
          console.log(user)
  
          bcrypt.compare(req.body.password, user.password, function(err, result) {
              if (result) {
                  var token = jwt.encode(user, JWT_SECRET)
                  return res.status(200).send({ user: user, token: token })
              } else {
                  return res.status(401).send({error: "Something is wrong."})
              }
          })
      })
  })
  </code></pre>
  
  <p>The current flow is: a user enters their credentials, and those credentials get returned to the <code>success</code> method in my <code>ajax</code> request.  The credentials show up in the browser's console (confirming that the server and client are communicating).  The question is, how do I route this request to the profile page (or any other page, for that matter)?  That is, the user is at <code>http://localhost:3000/login</code>, and after successfully logging in, they are routed to <code>http://localhost:3000/profile</code>, for example, where their personal profile information appears.  I'd love to learn both ways of doing this type of routing (server-side and client-side).  Thanks!</p>