【发布时间】:2020-02-09 08:46:03
【问题描述】:
我正在尝试使用 Vue、Express、Node 和 MongoDB 构建一个基本的登录/注册应用程序。我已成功设置 Express 路由器以启用用户注册和登录,并将基本用户信息存储在 MongoDB 中。我正在尝试在登录后将用户数据返回到屏幕。到目前为止,我已经在 Express 中设置了router.get() 以将所有用户的用户名返回到屏幕。但是,我想在 Vue.js 中配置 axios.get() 方法以仅返回登录用户的用户名,而不是存储在 MongoDB 中的所有用户名。通常在 Firebase 中,我会使用 let snapshot = await ref.where('userid', '==', firebase.auth().currentUser.uid).get() 之类的东西专门发回有关当前用户的信息。如何设置我的 axios.get() 方法来执行类似的操作?我的代码如下:
登录页面
<template>
<b-row>
<b-col cols="12">
<h2>
You are now logged in!
<b-link @click="logout()">(Logout)</b-link>
</h2>
<table style="width:100%">
<tr>
<th>User Names</th>
</tr>
<tr v-for="user in users" :key="user._id">
<td>{{ user.username }}</td>
</tr>
</table>
<ul v-if="errors && errors.length">
<li v-for="error of errors" :key="error._id">
<b-alert show>{{error.message}}</b-alert>
</li>
</ul>
</b-col>
</b-row>
</template>
<script>
import axios from 'axios'
export default {
name: 'BookList',
data () {
return {
users: [],
errors: []
}
},
created () {
axios.defaults.headers.common['Authorization'] = localStorage.getItem('jwtToken')
axios.get(`http://localhost:3000/api/auth`)
.then(response => {
this.users = response.data
})
},
methods: {
logout () {
localStorage.removeItem('jwtToken')
this.$router.push({
name: 'Login'
})
}
}
}
</script>
在 Express 中获取路线
router.get('/', function(req, res) {
User.find(function (err, products) {
if (err) return next(err);
res.json(products);
});
});
用户.js
var mongoose = require('mongoose');
var Schema = mongoose.Schema;
var bcrypt = require('bcryptjs');
var UserSchema = new Schema({
username: {
type: String,
unique: true,
required: true
},
password: {
type: String,
required: true
}
});
UserSchema.pre('save', function (next) {
var user = this;
if (this.isModified('password') || this.isNew) {
bcrypt.genSalt(10, function (err, salt) {
if (err) {
return next(err);
}
bcrypt.hash(user.password, salt, null, function (err, hash) {
if (err) {
return next(err);
}
user.password = hash;
next();
});
});
} else {
return next();
}
});
UserSchema.methods.comparePassword = function (passw, cb) {
bcrypt.compare(passw, this.password, function (err, isMatch) {
if (err) {
return cb(err);
}
cb(null, isMatch);
});
};
module.exports = mongoose.model('User', UserSchema);
注册路线
router.post('/register', function(req, res) {
if (!req.body.username || !req.body.password) {
res.json({success: false, msg: 'Please pass username and password.'});
} else {
var newUser = new User({
username: req.body.username,
password: req.body.password
});
// save the user
newUser.save(function(err) {
if (err) {
return res.json({success: false, msg: 'Username already exists.'});
}
res.json({success: true, msg: 'Successful created new user.'});
});
}
});
【问题讨论】:
-
@SuleymanSah,你为什么删除你的答案?
-
你的问题是get route吗?
-
我认为问题出在 Vue.js 模板中的路由和 axios.get() 方法上。我正在以特定用户身份登录,并希望配置路由和 get 方法以仅将我的用户名返回到屏幕。
-
我没有使用vue的经验,但我可以在快递方面提供帮助,我取消删除了答案,检查它是否有帮助
-
路线是否与我的答案中的代码一起使用?
标签: javascript node.js mongodb express vue.js