前言
最近要做一個H5項目,要把H5嵌入到app里面厨幻,這個APP是要先登錄的相嵌,然后開一個口子,通過一個點擊按鈕跳轉到我的H5頁面况脆。這按鈕是通過一個連接饭宾,類似于:
http://localhost:8080/#/home?appname=abcd&token=XXXX&sid=XXXXX&flag=eeefff&from=app
這種鏈接發(fā)過來,就是一定會帶上token和sid這種信息格了。
我們這個是內嵌看铆,app登錄了,把cookie 注入到我們的里面的h5環(huán)境盛末。其實我們H5網頁打開等于是一個瀏覽器環(huán)境弹惦。app提供這個環(huán)境給我們渲染網頁。這個環(huán)境我們是無法突破瀏覽器這個限制的悄但,一切都要讓外面塞到瀏覽器里面棠隐。
我們可以在首頁獲取到app給我們的一些登錄信息:
// 首頁 [http://localhost:8080/#/home?appname=abcd&token=XXXX&sid=XXXXX&flag=eeefff&from=app](http://localhost:8080/#/home?appname=abcd&token=XXXX&sid=XXXXX&flag=eeefff&from=app)
<script>
export default {
name: 'Home',
created() {
const query = this.$route.query;
// 保存在vuex里面,然后在里面另做處理
this.$store.commit('user/SET_TOKEN',query.token);
this.$store.commit('user/SET_SID',query.sid);
},
data () {
return {
}
},
mounted () {
},
}
</script>
然后是在store里面(store/modules/user.js)
import {
getSid,
setSid,
getToken,
setToken,
removeToken,
removeSid,
} from '@/utils/auth'
const state = {
token: getToken(),
sid: getSid(),
}
const mutations = {
SET_TOKEN: (state, data) => { // token
state.token = data
setToken(data)
},
SET_SID: (state, data) => { // sid
state.sid = data
setSid(data)
},
}
const actions = {
}
store/getters.js
const getters = {
token: state => state.user.token,
sid: state => state.user.sid,
}
export default getters