美文网首页
H5嵌入app,获取用户信息

H5嵌入app,获取用户信息

作者: 顺其自然AAAAA | 来源:发表于2022-11-06 11:34 被阅读0次

    前言

    最近要做一个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
    

    相关文章

      网友评论

          本文标题:H5嵌入app,获取用户信息

          本文链接:https://www.haomeiwen.com/subject/gflvtdtx.html