扫描后首页面显示数据

1、扫码后，通过token传递数据，地址栏有token值

2、前端实现过程

（1）跳转default.vue页面后，获取地址栏token值。（2）调用接口，根据token值获取用户信息。

3、layouts/default.vue页面js代码实现

（1）default.vue页面引入login的api。

java 复制代码

import loginApi from '@/api/login'

（2）default.vue页面js方法实现获取地址栏参数，获取后调用方法。

java 复制代码

<script>
import '~/assets/css/reset.css'
import '~/assets/css/theme.css'
import '~/assets/css/global.css'
import '~/assets/css/web.css'
import cookie from 'js-cookie'
// import userApi from '@/api/login'
import loginApi from '@/api/login'
export default {
  data() {
    return {
      token: '',
      loginInfo: {
        id: '',
        age: '',
        avatar: '',
        mobile: '',
        nickname: '',
        sex: ''
      }
    }
  },
  created() {
    // 获取路径里的参数token值
    this.token = this.$route.query.token
    console.log('this.token = ' + this.token)
    if (this.token) {
      this.wxLogin()
    } else {
      this.showInfo()
    }
  },
  methods: {
    // 微信登录后信息展示
    wxLogin() {
      // 把token字符串存入cookie
      cookie.set('guli_token', this.token, {
        domain: 'localhost'
      })
      cookie.set('guli_ucenter', '', { domain: 'localhost' })
      // 调用接口根据token获取用户信息
      loginApi.getInfoToken().then(response => {
        this.loginInfo = response.data.data.member
        // 把用户信息存入cookie
        cookie.set('guli_ucenter', this.loginInfo, { domain: 'localhost' })
      })
    },

    showInfo() {
      // debugger
      var jsonStr = cookie.get('guli_ucenter')
      if (jsonStr) {
        this.loginInfo = JSON.parse(jsonStr)
      }
    },

    logout() {
      // debugger
      cookie.set('guli_ucenter', '', { domain: 'localhost' })
      cookie.set('guli_token', '', { domain: 'localhost' })

      // 跳转页面
      window.location.href = '/'
    }
  }
}

</script>