登录前端整合（实现分析） | 学习笔记

开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）：登录前端整合（实现分析）】学习笔记，与课程紧密连接，让用户快速学习知识。

课程地址：https://developer.aliyun.com/learning/course/667/detail/11455

登录前端整合（实现分析）

内容介绍：

一、在 api 创建 login.js 文件,定义接口地址

二、在登录页面进行方法的调用

三、登录和登录成功之后首页面显示数据实现过程分析

登录的前端整合，主页面中点击登录进入到登录页面，或在注册成功之后自动跳转到登录页面，在登录页面中需要输入手机号和密码，点击登录。

整个过程会调用后端接口实现登录过程。登陆成功后会在首页面显示昵称和头像。

一、在 api 创建 login.js 文件,定义接口地址

1.登录的方法

//在登录中传入用户信息

submitLogin(userInfo){

return request({

//填入地址，和名字 login

url: " / educenter/member/ login,

//提交方式是 post 提交

method: 'post ' ,

//数据传递方式

data: userInfo

})

},

2.根据 token 获取用户信息，调用方法根据 request 对象获取头信息

getLoginUserInfo( ){

return request( {

//获取地址，名字为 getMemberInfo

url: ‘/ educenter/memberl getMemberInfo’,

//提交方式是 get 提交

method: 'get'

})

}

二、在登录页面进行方法的调用

建立一个登录页面

1.安装 js-cookie 插件  

插件中会用到命令 npm instal1 js-cookie，在项目中用终端打开，把命令复制粘贴后回车，就会联网把插件下载下来。

2.页面的调用

页面中需要调用 loginjs 的方法，引入方法和对象

import cookie from ‘js-cookie’

import loginApi from ‘@/ api/login'

可以在 node-modules 看到插件

（1）登录页面的显示

Data（） {

return {

//封装登录手机号和密码对象

user:{

mobile: ‘’,

password : ‘’

},

/获取用户信息

loginInfo:{}

}

},

（2）登录的方法

//在 submitLogin（）方法中调用接口

submitLogin( {

//传入对象 this.user

loginApi. submitLoginUser( this.user)

//登录成功会执行.then

.then( response => {

//登陆成功后返回字符串token，获取token字符串

response.data.data.token

})

}

三、登录和登录成功之后首页面显示数据实现过程分析

登陆成功之后会自动跳转入首页面中，在首页面的右上角原“登录、注册”位置显示用户信息。

1.登陆之后得到 token 值，调用接口登录返回 token 字符串。

2.把第一步返回 token 字符串放到 cookie 里面。

3.创建前端拦截器

接口中的 request 中是通过 header 得到 token 值，在 request.js 添加拦截器用于传递 token 信息（拦截器：发送请求，拦截器可以将请求拦下），判断 cookie 里面是否有 token字符串，如果有把 token 字符串放到 header(请求头)，为了接口可以成功取到token值。

//debugger，判断cookie中是否有名为guli_token的值

if (cookie.get( ‘ guli_token')){

//如果有该值，则取出放入header中

config.headers [ "token"] - cookie.get(" guli_token");

}

1. 根据 token 值调用接口,为了首页面显示，根据token获取用户信息，把调用接口返回用户信息放到 cookie 里面。
   

//登录成功根据 token 获取用户信息

loginApi.getLoginInfo().then(response =>{

this.loginInfo - response.data.data.item

//将用户信息记录到 cookie 中

cookie.set( ' gull_ucenter " , this.loginInfo，{ domain: 'localhost’})

//跳转页面

windovs. location.href - "/”;

5. 在首页面显示用户信息

从第四步cookie获取用户信息进行显示

总体流程：

第一步调用接口先做登录，登录接口中会返回一个字符串，将字符串得到；

第二步把返回的 token 字符串放到 cookie 中；

第三步把 cookie 中的值取出放入 header 中，加入拦截器，只要请求中有 token值就把字符串放到请求头中；

第四步根据token值调接口，获取用户信息，返回用户信息后再将信息放到 cookie里面；

最后一步在首页面显示用户信息，从 cookie 中将数据取出，并且在首页面显示用户信息。