Question

我在代码中使用 vue-gapi https://www.npmjs.com/package/vue-gapi 来访问 Google Calendar API。我成功安装并使用此插件从 Calendar API 获取数据。我现在很难使用路由器防护。

插件/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);

路由器/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：无法读取未定义的属性“$gapi”。

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

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 和路由器守卫一起使用

1 个答案: