开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）：登录前端整合（2）】学习笔记，与课程紧密连接，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11457
登录前端整合（2）
内容介绍：
一、default.vue 页面显示登录之后的用户信息
二、启动程序测试登录
一、default.vue 页面显示登录之后的用户信息
1.判断登录状态
前端页面代码，不需要自己打出，可以直接复制修改，主要是学习掌握过程原理。
下面代码中 loginInfo 有值则显示登录，若没有则不显示登录，对 id、昵称可以做判断。
import cookie from "js-cookie'
export default {
data(){
return {
token :’ ’,
//用户信息
loginInfo: {
id: ’ ’,
age: ’ ’,
avatar: ’ ’,
mobile: ’ ’,
nickname : ’ ’,
sex: ’ ’,
}
}
},
//v-if 的判断，loginInfo 是上面代码中的对象，“!loginInfo.id”没有 id 值表示不是登录状态，不是登录状态就会显示登录和注册页面。
<ul class="h-r-login">
<li v-if="!loginInfo.id" id="no- login">
<a href=" / login" title="登录">
<em class="icon18 login-icon">
< / em><span class="vam m15”>登录</span>
< / a>
<a href=" /register" title="注册">l
<span class="vam m15">注册</ span>
< / a>
//"loginInfo.id"有id值表示是登录状态，此时页面显示用户的昵称和头像。
</li>
<li v-if="loginInfo.id" id="is-login-one" c lass="mr10">
<a id="headerMsgCountId" href="#" title="消.息">
<em class="icon18 news-icon">
< / em>
</a>
<q class="red-point" style="display : none"> </q>
</li>
<li v-if="loginInfo.id" id="is-login-two" class="h-r-user">
<a href=" /ucenter" title>
<img
: src=""loginInfq.avatar"width="30"
height=" 30"
class="vam picImg"
alt>
<span id="userName" c lass="vam disIb">{{ loginInfo.nickname }}</span>
< /a>
<a href="javascript :void(0);" title="退出”aclick="logout()" c lass="m15"">退出</a>
</li>
<!--/未登录显示第1 li:登录后显示第2，3li -->
2.登录核心代码
下面一段代码是页面整合的核心代码，直接从 COOKIE 中获取值，把字符串转换成JS对象。
created() {
this.showInfo( )
},
methods:{
//创建方法，从cookie获取用户信息
showInfo() {
//从cookie获取用户信息
var userStr = cookie-get( " guli_ucenter " )
//把字符串转换json对象(js对象)
if(userStr){
this.loginInfo = JSON.parse(userStr)}
}
}
注意 userStr 的字母大小写要统一
二、启动程序测试登录
点击登录输入手机号和密码
登陆成功后右上角显示用户昵称和头像，登录整合成功。
