登录前端整合（2） | 学习笔记

开发者学堂课程【微服务+全栈在线教育实战项目演练（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">&nbsp;

< / 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">&nbsp;

< / em>

</a>

<q class="red-point" style="display : none">&nbsp;</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 的字母大小写要统一

二、启动程序测试登录

点击登录输入手机号和密码

登陆成功后右上角显示用户昵称和头像，登录整合成功。