前言
最近要做一个H5项目，要把H5嵌入到app里面，这个APP是要先登录的，然后开一个口子，通过一个点击按钮跳转到我的H5页面。这按钮是通过一个连接，类似于：
http://localhost:8080/#/home?appname=abcd&token=XXXX&sid=XXXXX&flag=eeefff&from=app
这种链接发过来，就是一定会带上token和sid这种信息。
我们这个是内嵌，app登录了，把cookie 注入到我们的里面的h5环境。其实我们H5网页打开等于是一个浏览器环境。app提供这个环境给我们渲染网页。这个环境我们是无法突破浏览器这个限制的，一切都要让外面塞到浏览器里面。
我们可以在首页获取到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
