vuejs2 - Vue-authenticate：为什么我在使用浏览器隐身模式且没有令牌时能够从 API 中获取敏感数据？

Question

我正在使用vue-authenticate并且似乎仍在提取秘密 API 数据，尽管在 Chrome 和 Edge 的隐身会话中手动从本地存储中删除了我的令牌。

我的预期输出是，如果我删除令牌并且除了隐身浏览器会话之外没有打​​开其他浏览器，我应该无法使用敏感的 API 数据。

这是我的设置：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import VueAxios from 'vue-axios'
import VueAuthenticate from 'vue-authenticate'
import axios from 'axios'

Vue.use(VueAxios, axios)
Vue.use(VueAuthenticate, {
  baseUrl: 'http://localhost:8080',

  providers: {
    abc: {
      name: 'abcName',
      url: '/auth/abc',
      clientId: process.env.VUE_APP_CLIENT_ID,
      redirectUri: 'http://localhost:8080',
      authorizationEndpoint: process.env.VUE_APP_AUTH_ENDPOINT,
      defaultUrlParams: ['response_type', 'client_id', 'redirect_uri'],
      requiredUrlParams: null,
      optionalUrlParams: null,
      scope: null,
      scopePrefix: null,
      scopeDelimiter: null,
      state: null,
      oauthType: '2.0',
      popupOptions: null,
      responseType: 'token',
      responseParams: {
        code: 'token',
        clientId: 'clientId',
        redirectUri: 'redirectUri'
      }
    }
  }
})

new Vue({
  router,
  store,
  render: (h) => h(App)
}).$mount('#app')

我正在使用一个名为的按钮单击事件对此进行测试async getData()：

async getData() {
      const token = localStorage.getItem('vue-authenticate.vueauth_token')

      console.log(token)
      try {
        const response = await axios.get(
          'https://abc-api.com/getDataStuff',
          {
            headers: {
              Authorization: `Bearer ${token}`
            },
            withCredentials: true
          }
        )
        console.log('data:', response.data)
}

上面的代码允许客户端获取数据....但是如果我手动复制https://abc-api.com/getDataStuff链接并粘贴到另一个隐身浏览器会话中，我会收到权限错误 401（这是我期望得到的）。

我的 localhost URI 确实在我的服务器的 SSO 配置以及后端 API 的 SSO 配置中列入了白名单。我也在使用implicit授权类型。

感谢任何人都可以解释为什么我能够使用 API 数据，尽管据我所知，我的隐身浏览器会话中没有令牌。

标签： vuejs2oauth-2.0vue-authenticate