Я использую сервер Express на localhost:5000 и приложение Vue на localhost:8080 с логином discord-passport oAuth2.
Когда я вхожу в браузер и отправляю запрос на localhost:5000/api/users. Он отображает правильную информацию, однако, когда мой обработчик службы Vue делает запрос, возникает следующая ошибка data.map is not a function, поскольку сервер Express проверяет, прошел ли аутентификация пользователя, и возвращает строку * 1006. *
Моя цель - показать информацию о зарегистрированных пользователях на localhost:8080/#/profile.
Я знаю, что API работает, как он работает в браузере, я думаю, что проблема связана с обработчиком службы.
Это api/users
const express = require('express');
const mongodb = require('mongodb');
const router = express.Router()
//get posts
router.get('/', checkAuth,async (req, res) => {
const users = await loadUsersCollection()
res.send(await users.find(req.user['id']).toArray());
})
function checkAuth(req, res, next) {
if (req.isAuthenticated()) return next();
console.log('not logged in')
res.send('not logged in :(');
}
async function loadUsersCollection() {
const client = await mongodb.MongoClient.connect('mongodb+srv://mongodbURI', {
useNewUrlParser: true
});
return client.db('vue_express').collection('users');
}
module.exports = router;
Это обработчик службы
import axios from 'axios'
const url = 'http://localhost:5000/api/users'
class UserService {
// Get user
static getUser() {
return new Promise(async (resolve, reject) => {
try {
const res = await axios.get(url)
const data = res.data;
//if (data == 'not logged in :(') throw 'not logged in'
resolve(
data.map(user => ({
...user,
createdAt: new Date(user.createdAt)
})
)
)
} catch (err) {
reject(err)
}
})
}
}
export default UserService
и это шаблон Vue
<template>
<div>
User Page
<p v-if="error">{{error}}</p>
<button>Click</button>
<div
href="#"
v-for="(user,index) in users"
v-bind:item="user"
v-bind:index="index"
v-bind:key="user._id"
>
<p>Username: {{user.name}}</p>
<p>{{user.email}}</p>
<p>{{user.img}}</p>
<p>{{user.type}}</p>
</div>
</div>
</template>
<script>
import UserService from "../UserService";
export default {
name: "User",
data() {
return {
users: [],
error: "",
name: "",
email: "",
img: "",
type: "",
};
},
async created() {
try {
this.users = await UserService.getUser();
} catch (err) {
this.error = err.message;
}
}
};
</script>