node.js - Vue oAuth 在快速错误中保持登录状态

问题描述

我正在使用 discord-passport oAuth2 登录运行 Express 服务器localhost:5000和 Vue 应用程序。当我登录并在浏览器中发出请求时，它会显示正确的信息，但是当我的 Vue 服务处理程序发出请求时，会发生以下错误，因为 Express 服务器检查用户是否经过身份验证并返回一个字符串localhost:8080
localhost:5000/api/usersdata.map is not a functionnot logged in :(

我的目标是显示登录用户的信息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>

标签： node.jsexpressvue.jsoauth-2.0routing

node.js - Vue oAuth 在快速错误中保持登录状态

问题描述

解决方案

推荐阅读