vue ja应用程序无法捕获用户名

我正在使用vuejs和mysql作为后端创建用户登录和注册系统。我想在个人资料中显示用户名和用户id。帕格·佩奇。但问题是,即使我在登录页面中输入了正确的用户名和密码,也无法在个人资料中显示这些信息。帕格页面显示 用户名:{{useranme}

这是我的应用程序。js代码。

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
    });
});

这是用户。js代码。

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) => {
    User.create({
        username: req.body.username,
        password: req.body.password
    }).then((user) => {
        if (user) {
            res.redirect('/signin.html');
        }
    }).catch((err) => 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;

这是我的个人资料。帕格密码。

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 }}
        // <option value="v.id">{{v.name}}</option>
        // <option value="2">MI</option>
      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) => {
        axios.get('/api/products').then(function (response) {
        resolve(response.data)
        })
        }).then((data) => {
        this.products = data
        // console.log(this.products)
        })
        },
        users(username) {
        new Promise((resolve) => {
        axios.get('/api/users').then(function (response) {
        resolve(response.data)
        })
        }).then((data) => {
        this.username = username
        })
        },
        addToCart(id) {
        console.log(id)
        var obj = { productId: id };
        console.log(obj)
        new Promise((resolve) => {
        axios.post('/api/cart/', obj).then(function (response) {
        resolve(response.data)
        })
        }).then((data) => {
        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) => {
        axios.get('/api/vendor').then(function (data) {
        resolve(data.data)
        // console.log(data.data)
        })
        }).then((data) => {
        this.vendors = data
        })
        },
        applyfilters(id) {
        new Promise((resolve) => {
        axios.get('/api/products/' + id).then(function (response) {
        resolve(response.data)
        })
        }).then((data) => {
        this.products = data
        // console.log(this.products)
        })
        }
        }
        })
        app.getAllProducts();
        app.findAllVendors();

这是我运行应用程序时的屏幕截图。