Javascript 使用vuejs和nodejs的Google oauth2

我开发了一个bug报告程序。整个项目分为两个不同的项目——都有不同的package.json文件——一个用于客户端，其中我使用Vue.js 2，另一个用于使用Nodejs 8和Express.js构建的服务器部分。这两部分将通过RESTAPI进行通信

要访问仪表板并报告错误，用户必须登录其Google帐户

到目前为止，我已经初始化了Vuejs中的结构，用户将在其中触发登录事件。我使用一个

a

标记，当按下：in时触发

signin（）

方法

<a @click="sign">SIGN IN</a>
// ...
export default {
  methods: {
    signin() {
      // start animation
      let loadingInstance = this.$loading({ 
        fullscreen: true,
        text: 'Waiting for Google authorization...'
      });

      // opens the Google sign in window
      // when ready stop the loading 
     loadingInstance.close();
    },
  },
};

我希望访问令牌保存在服务器中。然后，当客户机必须采取行动时，他将与服务器通信。只有服务器将检查访问令牌的有效性

我主要关心的是如何构造（如果可能的话）应用程序中的API调用和路由。我阅读了许多相关文章（在问题的末尾提供），并使用了与原始Google oauth API相关的不同方法，或者使用了passport.js之类的库，但我不知道如何实现这一点。我必须重新考虑我的申请结构吗？请提供一个明确的答案，而不是另一个链接参考

材料：

• 。。。还有更多。（不幸的是，我没有保留我的搜索历史记录。）

/*
 * PACKAGE.JSON IMPORTS
 */
import VueRouter from 'vue-router';

/*
 * APP PAGES
 */
import Index from '../pages/index/index.vue';

// The component that only an authorized member can access.
const SecretPage = { template: '<div>Secret Page</div>' };

/*
 * ROUTER CONFIGURATION
 */
const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', name: 'index', component: Index },
    { path: '/secret', name: 'secret', component: SecretPage, meta: { requiresAuth: true } },
    { path: '*', redirect: { name: 'index' }},
  ],
});

export default router;

/*
 * IMPORTS
 */
import express from 'express';
import bodyParser from 'body-parser';
import ENV_VAR from './config/ENV_VAR';

/*
 * DECLARATIONS
 */
const app = express();

/*
 * EXPRESS.JS CONFIGURATIONS
 */

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

/*
 * ROUTES
 */
app.get('/', (req, res) => {
  res.send('Hello world');
});

app.listen(ENV_VAR.PORT, console.log(`Server running on port ${ENV_VAR.PORT}.`));