title: vue ja applications failed to catch username
body: <p>I am creating user login and registrations system by using vuejs and mysql for back end. I want to show username and user id into profile.pug page . But the problem is even i enter the correct  username and password into login page , it can  not show that informations into profile.pug page  Instead showing <strong>Username:{{useranme}}</strong></p>
  
  <p>Here is my app.js code .</p>
  
  <pre><code>app.post('/signin', passport.authenticate('local', {
      successRedirect: '/profile', // redirect to the secure profile section
      failureRedirect: '/signup', // redirect back to the signup page if there is an error
      failureFlash: true // allow flash messages
  }));
  app.get('/profile', isLoggedIn, function (req, res) {
      res.render('profile.pug', {
          user: req.user.username // get the user out of session and pass to template
      });
  });
  </code></pre>
  
  <p>Here is the user.js code .</p>
  
  <pre><code>var route = require('express').Router();
  var { User } = require('../../db');
  var session = require('express-session');
  var passport = require('../../passport');
  
  route.use(session({
      secret: 'some very very secret thing',
      resave: false,
      saveUninitialized: true
  }));
  route.use(passport.initialize());
  route.use(passport.session());
  
  route.post('/signup', (req, res) =&gt; {
      User.create({
          username: req.body.username,
          password: req.body.password
      }).then((user) =&gt; {
          if (user) {
              res.redirect('/signin.html');
          }
      }).catch((err) =&gt; res.send("ERROR CREATING USER"));
  });
  
  route.post('/signin', passport.authenticate('local', {
      successRedirect: '/profile', // redirect to the secure profile section
      failureRedirect: '/signup', // redirect back to the signup page if there is an error
      failureFlash: true // allow flash messages
  
  }));
  app.get('/profile', isLoggedIn, function (req, res) {
      res.render('profile.pug', {
          user: req.user.username // get the user out of session and pass to template
      });
  });
  exports = module.exports = route;
  </code></pre>
  
  <p>Here is my profile.pug code .</p>
  
  <pre><code>doctype html
  html(lang='en')
    head
      title Bootstrap Example
      meta(charset='utf-8')
      meta(name='viewport', content='width=device-width, initial-scale=1')
      link(rel='stylesheet', href='bootstap.css')
      script(src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js')
      script(src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js')
      script(src='https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js')
      script(src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js')
      script(src='https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js')
    body
      nav.navbar.navbar-expand-sm.bg-dark.navbar-dark
        ul.navbar-nav
          li.nav-item
            a.nav-link(href='index.html') Show All Products
          li.nav-item
            a.nav-link(href='/signin.html') Signin
          li.nav-item
            a.nav-link(href='cart.html')  cart
          li.nav-item
            a.nav-link(href='/index.html', v-on:click='logout') Logout
        label Username:{{username}}
      br
      #app.container
        .nav-item.active(v-for='user in users')
          label Username:{{username}}
        select#sel1.form-control(v-on:change='applyfilters($event.target.value)')
          option(value='') Select Any value
          option(v-for='v in vendors', :value='v.id') {{ v.name }}
          // &lt;option value="v.id"&gt;{{v.name}}&lt;/option&gt;
          // &lt;option value="2"&gt;MI&lt;/option&gt;
        br
        #product-list.row.col-12
          .col-4.card.mx-2.p-2(v-for='product in products', style='margin-bottom: 20px')
            p
              | Product id:
              b {{product.id}}
            b
              b Product Name :
              | {{product.name}}
              .row
                .col-4.m-3.p-3
                  b Price :
                  |   {{product.price}}
                .col-4.m-3.p-3
                  b Vendor :
                  |   {{product.vendor.name}}
                .col-6.m-2.p-3
                  button.col.btn.btn-primary(v-on:click='addToCart(product.id)') Buy
          b
            br
        b
      b
        script.
          let app = new Vue({
          el: "#app",
          data: {
          newTask: '',
          id: 0,
          url: '/todos',
          status: false,
          products: [],
          vendors: []
          },
          methods: {
          getAllProducts() {
          new Promise((resolve) =&gt; {
          axios.get('/api/products').then(function (response) {
          resolve(response.data)
          })
          }).then((data) =&gt; {
          this.products = data
          // console.log(this.products)
          })
          },
          users(username) {
          new Promise((resolve) =&gt; {
          axios.get('/api/users').then(function (response) {
          resolve(response.data)
          })
          }).then((data) =&gt; {
          this.username = username
          })
          },
          addToCart(id) {
          console.log(id)
          var obj = { productId: id };
          console.log(obj)
          new Promise((resolve) =&gt; {
          axios.post('/api/cart/', obj).then(function (response) {
          resolve(response.data)
          })
          }).then((data) =&gt; {
          console.log(data)
          console.log(data.id)
          if (!data.id) {
          // console.log("fist login")
          // window.alert("Fist login ")
          //  window.location = "signin.html";
          }
          else {
          // console.log("successfully add to cart")
          window.alert("product has been added to your cart")
          }
          })
          },
          findAllVendors() {
          new Promise((resolve) =&gt; {
          axios.get('/api/vendor').then(function (data) {
          resolve(data.data)
          // console.log(data.data)
          })
          }).then((data) =&gt; {
          this.vendors = data
          })
          },
          applyfilters(id) {
          new Promise((resolve) =&gt; {
          axios.get('/api/products/' + id).then(function (response) {
          resolve(response.data)
          })
          }).then((data) =&gt; {
          this.products = data
          // console.log(this.products)
          })
          }
          }
          })
          app.getAllProducts();
          app.findAllVendors();
  </code></pre>
  
  <p>Here is the screen shot when i run the applications.</p>
  
  <p><a href="https://i.stack.imgur.com/nRljy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nRljy.png" alt="enter image description here"></a></p>