如何将 vue-gapi 插件与 router.js 和路由器守卫一起使用
How to use vue-gapi plugin with router.js and router guards
我在我的代码中使用 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 存在?由于我是初学者,我不知道如何正确导入它。
如果你想在路由器中访问 Vue 实例,请使用 router.app
而不是 this
更改此行:
this.$gapi.currentUser()
对此:
router.app.$gapi.currentUser()
您可以在以下位置阅读有关路由器实例属性的更多信息:https://router.vuejs.org/api/#router-instance-properties
我在我的代码中使用 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 存在?由于我是初学者,我不知道如何正确导入它。
如果你想在路由器中访问 Vue 实例,请使用 router.app
而不是 this
更改此行:
this.$gapi.currentUser()
对此:
router.app.$gapi.currentUser()
您可以在以下位置阅读有关路由器实例属性的更多信息:https://router.vuejs.org/api/#router-instance-properties