带有vuejs和nodejs的Google oauth2
我开发一个错误记者应用程序。 整个项目分为两个不同的项目 – 两个都有不同的package.json文件 – 一个用于客户端，我使用Vue.js 2，一个用Nodejs 8和Express.js构build的服务器部分。 这两部分将通过REST API进行通信。
要访问信息中心并报告错误，用户必须login他的Google帐户。
到目前为止，我已经初始化Vuejs中用户将会触发login事件的结构。 我使用a标签，当按下时触发signin()方法：in
<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(); }, }, };
贝娄我发布了我已经注册的路线：
/* * 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;
用户期望的是当他点击loginbutton时，Google窗口将会popup，他将被授权并redirect到仪表板。
服务器部分还不包含任何与客户端的交互：
/* * 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之类的库，但是我还没有理解如何进行这项工作。 我是否需要重新考虑我的应用程序的结构？ 请提供明确的答案，而不是另一个链接参考。
材料：
-
官方Google OAuth文档
-
Vue2authentication/授权的例子，教程？ – Vuejs论坛
-
带有Firebase的Vuejs – 来自官方文档
-
… 和更多。 （不幸的是，我没有保留我的searchlogging。）