我开发了一个bug报告器应用程序。整个项目分为两个不同的项目 - 两个都有不同的package.json文件 - 一个用于客户端，我使用Vue.js 2，一个用于使用Nodejs 8和Express.js构建的服务器部分。这两部分将通过REST API进行通信。
要访问信息中心并报告错误，用户必须登录自己的Google帐户。
到目前为止，我已经在Vuejs中初始化了用户将触发登录事件的结构。我使用a标记，按下时会触发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();
},
},
};
Bellow我发布了我已注册的路线：
/*
* 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;
我的用户期望当他点击登录按钮时，会弹出Google窗口，他将获得授权并重定向到信息中心。
服务器部分尚未包含与客户端的任何交互：
/*
* 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}.`));
我希望将访问令牌保存在服务器中。然后当客户端必须采取行动时，他将与服务器通信。只有服务器才会检查访问令牌的有效性。
我主要关心的是如何构建（如果可能的话）API调用和我的应用程序中的路由。我阅读了许多相关文章（在问题的最后提供）并使用了与原始Google oauth API相关的不同方法或使用诸如passport.js之类的库，但我还没有理解如何使这项工作。我是否必须重新考虑我的应用结构？请提供明确的答案，而不是其他链接参考。
材料：