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()