Vue + electron webview实现token免登陆

webview的免登陆访问主要是通过其preload属性将web网页上保存的token存到webview内嵌的页面中，从而实现免登陆功能。

vue文件

<template>
    <div style="font-size: 16px" v-loading="!src">
      <webview id="webview" ref="webview" :src="src" allowpopups :preload="preload"></webview>
      <el-button type="primary" class="btn" @click="close">关闭窗口</el-button>
    </div>
</template>

<script>
import { remote, ipcRenderer } from 'electron'
import { EVENT_OPEN_WEB_EXPLAIN_RESOURCE, EVENT_RENDER_CLOSE_EXPLAIN } from '../../shared/events'
import { token } from '../../../public/preload'
export default {
  name: 'bookmark',
  data () {
    return {
      src: '',
      preload: `file://${__static}/preload.js` //js文件不能被打包压缩
    }
  },
  mounted () {
  // webview控制台
  // const webviewConsole = document.querySelector('webview')
  // webviewConsole.addEventListener('dom-ready', () => {
  //   webviewConsole.openDevTools()
  // })
  const webview = this.$refs.webview
  webview.addEventListener('new-window', (e) => {
    const protocol = require('url').parse(e.url).protocol
    if (protocol === 'http:' || protocol === 'https:') {
      webview.src = e.url
    }
  })
  ipcRenderer.on(EVENT_OPEN_WEB_EXPLAIN_RESOURCE, (evt, arg, details) => {
    this.src = arg
    console.log(details)
  })
  },
  methods: {
    close () {
      ipcRenderer.send(EVENT_RENDER_CLOSE_EXPLAIN)
    }
  },
  created() {
    // webview.openDevTools()
    // token()
  }
}
</script>

<style scoped>
webview {
  display: flex;
  height: -webkit-fill-available;
}
.btn {
  position: fixed;
  bottom: 40px;
  right: 20px;
}
</style>

preload.js文件

preload.js(放在public下)
const electron = require('electron')
function writeToken() {
let userInfoToken = electron.remote.getGlobal('user').accessToken
document.cookie = `Login-Token=bearer ${userInfoToken}`
}

writeToken()