Vue3中VueGapi配置多scope时调用login无响应无报错如何解决

你配置错误的核心原因是 VueGapi 的 scope 配置项不支持数组格式传参，仅接收空格分隔的多权限字符串。

你只需要把定义的SCOPES数组拼接为空格分隔的字符串再赋值给scope字段即可，修改后的配置代码如下：

const SCOPES = ['https://www.googleapis.com/auth/classroom.courses.readonly',
  'https://www.googleapis.com/auth/classroom.profile.emails',
  'https://www.googleapis.com/auth/classroom.profile.photos',
  'https://www.googleapis.com/auth/classroom.rosters',
  'https://www.googleapis.com/auth/classroom.rosters.readonly'
];

app.use(VueGapi, {
  apiKey: 'MyApiKey',
  clientId: 'myClientId.apps.googleusercontent.com',
  discoveryDocs: ['https://classroom.googleapis.com/$discovery/rest?version=v1'],
  // 数组转空格分隔字符串
  scope: SCOPES.join(' '),
})
app.mount('#app')

Google OAuth 2.0 原生接口本身要求多个权限作用域以空格分隔的字符串形式传递，VueGapi 底层没有对数组格式的scope做兼容转换，直接透传给Google接口时会解析失败，所以会出现无响应也无报错的情况。

内容的提问来源于stack exchange，提问作者imin