开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）：微信扫描登录（首页显示信息）】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11466
微信扫描登录（首页显示信息）
内容介绍：
一、首页显示信息
二、具体做法
三、Default.vue代码演示
四、login.vue 代码演示
一、首页显示信息
1.在首页面路径中有 token 字符串
获取首页路径里面 token 字符串
2.把获取 token 值，放到 cookie 里面
有前端阻拦器，判断 cookie 是否有 token ，如果有，把 cookie 里面 token 获取出来，放到 header 里面
3.调用后端接口，根据 token 值获取用户信息，把获取出来的用户信息放到 cookie 里面
二、具体做法
代码1：this.token = this.$route.query.token
//获取路径里面 token 值
代码2：
if（this.token）{
this.wxLogin()
}
this.showInfo()
}
//判断路径是否有 token 值
代码3：
wxLogin(){
}
//微信登录显示的方法
代码4：
cookie.set(‘guli_token’,this.token,{domin:’localhost’})
cookie.set(‘guli_ucenter’,’’,{domin:’localhost’})
//把 token 值放到 cookie 里面
代码5：
loginApi . getLoginUserInfo( )
. then( response => ｛
this. loginInfo = response . data . data .userInfo
cookie. set( " guli_ucenter' , this. loginInfo, ｛domain: ' localhost'})
//调用接口，根据 token 值获取用户信息
})
三、Default.vue 代码演示
代码26-179
<router-link to="/article" tag="li" active-class="current"
<a>文章</a>
</router-link>
<router-link to="/qa" tag "li" active-class-"current">
<a>问答<a>
</router-link>
</ul>
<!-- / nav -->
<!- / nav -->
<ul class="h-r-login">I
<li v-if="! loginInfo.id" id="no-login">
< a href=" " title="登录">
<em class="icon18 login-icon"> </em>
<span class="vam ml5">登录</span>
</ a>
< a href="/register" title="注册">
<span class="vam m15">注册</span>
</ a>
</li>
<li v-if="loginInfo.id" id="is-login-one" class="mr10">
<a id="headerMsgCountId" href="#" title="消息”>
<em class="icon18 news-icon"> </em>
</ a>
<q class="red-point" style="display: none"> </q>
</li>
<liv-if="loginInfo.id" id-"is-login-two" class="h-r-user">
< a href="/ucenter" title>
<img
:src="loginInfo.avatar"
width="30"
height="30"
class="vam picImg"
alt
<span id="usertlame" class="vam disIb">{{ loginInfo.nickname }}</span>
</ a>
< a href="javascript:void(o);"title="退出"@click="logout()”class="m15">退出<)
</li>
a)
<!-- /未登录显示第1 1i:登录后显示第2，3 1i-->
</ul>
<aside class="h-r-search">
<form action="#" method="post"><label class="h-r-s-box">
<input type-"text" placeholder="输入你想学的课程"name="queryCourse.courseName'
<button type="submit" class="s-btn">
<em class="icon18"> </em>
<button>
</label>
</form>
</aside>
</div>
<aside class="mw-nav-btn">
<div class="mw-nav-icon"></div>
</aside>
<div class="clear"></div>
</section>
</header>
<!-- /公共头引入 -->
<nuxt/>
<!-- 公共底引入 -->
<footer id="footer">
<section class="container">
<div class>
<h4 class="hLh30">
<span class="fsize18 f-fM c-999">友情链接</span>
</h4>
<ul class="of flink-list">
<li>
< a href="http://www.atguigu.com/" title="尚硅谷”target="blank">尚硅谷</ a>
</li>
</ul>
<div class="clear"><div>
</div>
<div class="b-foot">
<section class="fl col-7">
<section class="mr20"
<section class="b-f-link">
< a href="#" title="关于我们"target=”blank”>关于我们</ a>
<a href="#" title-"联系我们"target="blank">联系我们<a>
< a href="#" title="帮助中心"target="blank">帮助中心</ a>
< a href="#* title="资源下载"target=”blank”>资源下载<a><span>服务热线:010-56253825(北京)0755-85293825(深圳)</span><span>Email: info@atguigu.com</span></section>
<section class="b-f-link mt10">
<span>02018课程版权均归谷粒学院所有京ICP备17055252号</span)
</section>
</section>
</section>
<aside class="fl col-3 tac mt15">
<section class="gf-tx><span>
< img src="~/assets/img/wx-icon.png" alt>
</span>
</section>
<section class="gf-tx">
<span>
< img src="~/assets/img/wb-icon.png"alt>
</span>
</section>
</aside>
<div class="clear">
</div>
</div>
</section>
</footer>
<!-- /公共底引入 -->
</div>
<script>
</template>
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 loginApi from '@/api/login
export default { data(){
return {
token:"", loginInfo:{
id:’’
age:’’，
avatar:’’， mobile:" nickname:"，
sex:’’
}
}
}
created(){
//获取路径里面 token 值
this.token = this.$route.query.token if(this.token){
//判断路径是否有 token 值 this.wxLcgin()
this.showInfo()}，
methods:{
//微信登录显示的方法 wxLogin(){
//把 token 值放到 cookie 里面
cookie.set('guli token',this.token,{domain: "localhost'}) cookie.set('guli ucenter',"",{domain:"localhost'})
//调用接口，根据 token 值获取用户信息
loginApi.getLoginUserInfo()
四、Login.vue 代码演示
代码47-82
import cookie from "js-cookie
import loginApi from "@/api/login
export default {
layout: 'sign',
data(){
return {
//封装登录手机号和密码对象
user:{
mobile:’’,
password:’’
},
//用户信息 loginInfo:{ }
}
}，
methods:{
//登录的方法
submitLogin(){
//第一步 调用接口进行登录，返回 token 字符串
loginApi.submitLoginUser(this.user)
.then(response => {
//第二步 获取 token 字符串放到 cookie 里面
//第一个参数 cookie 名称，第二个参数值，第三个参数作用范围
cookie.set('guli_token',response.data.data.token, {domain: 'localhost'})
//第四步 调用接口 根据 token 获取用户信息，为了首页面显示
loginApi.getLoginUserInfo()
.then(response =>{
this.loginInfo =response.data.data.userInfo
//获取返回用户信息，放到 cookie 里面
cookie.set('guli _ucenter',this.loginInfo,{domain:"localhost'})
//跳转页面
