如何将 vue-gapi 插件与 router.js 和路由器守卫一起使用

Question

我在我的代码中使用 vue-gapi https://www.npmjs.com/package/vue-gapi 来访问 Google 日历 API。我成功安装并使用此插件从日历 API 获取数据。我现在很难使用 router guards。

plugins/vuagapi.js:

import Vue from 'vue';
import VueGapi from 'vue-gapi';

const apiConfig = {
  apiKey: '***',
  clientId:
    '***.apps.googleusercontent.com',
  discoveryDocs: [
    'https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest',
  ],
  scope: 'https://www.googleapis.com/auth/calendar.readonly',
  prompt: 'select_account',
};

Vue.use(VueGapi, apiConfig);

router/index.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
import Dashboard from '../views/Dashboard.vue';
import Login from '../views/Login.vue';
import '../plugins/vuegapi.js';

Vue.use(VueRouter);

const routes = [
  {
    path: '*',
    redirect: '/',
  },
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/login',
    name: 'Login',
    component: Login,
  },
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: Dashboard,
    meta: {
      authRequired: true,
    },
  },
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
});

router.beforeEach((to, from, next) => {
  if (to.matched.some((record) => record.meta.authRequired)) {
    if (this.$gapi.currentUser()) {
      next();
    } else {
      alert('You must be logged in to see this page');
      next({
        path: '/login',
      });
    }
  } else {
    next();
  }
});

export default router;

我得到：vue-router.esm.js?8c4f:2314 TypeError: Cannot read 属性 '$gapi' of undefined.

任何人都可以指出我正确的方向吗？我可以在 .vue 文件中使用这个插件，但不能在另一个普通的 .js 中使用，怀疑这个 $gapi 仅作为 Vue instakce property/method 存在？由于我是初学者，我不知道如何正确导入它。

Answer 1

如果你想在路由器中访问 Vue 实例，请使用 router.app 而不是 this

更改此行：

this.$gapi.currentUser()

对此：

router.app.$gapi.currentUser()

您可以在以下位置阅读有关路由器实例属性的更多信息：https://router.vuejs.org/api/#router-instance-properties

如何将 vue-gapi 插件与 router.js 和路由器守卫一起使用

How to use vue-gapi plugin with router.js and router guards

javascript

google-api-js-client

vue.js

vue-router

vuejs2