云讯健身管理系统-12--SSO单点登录、阿里云短信
一、单点登录
1. 用户登录业务介绍
1.1 单一服务器模式—sessiong广播机制
早期单一服务器，用户认证，将其session复制
1.2. SSO(single sign on)模式
1.3. Token模式
业务流程图{用户访问业务时，必须登录的流程}
二、使用JWT进行跨域身份验证
1、传统用户身份验证
Internet服务无法与用户身份验证分开。一般过程如下：
1、用户向服务器发送用户名和密码。
2、验证服务器后，相关数据（如用户角色，登录时间等）将保存在当前会话中。
3、服务器向用户返回session_id，session信息都会写入到用户的Cookie。
4、用户的每个后续请求都将通过在Cookie中取出session_id传给服务器。
5、服务器收到session_id并对比之前保存的数据，确认用户的身份。
这种模式最大的问题是，没有分布式架构，无法支持横向扩展。
2、解决方案
1、session广播
2、将透明令牌存入cookie，将用户身份信息存入redis
另外一种灵活的解决方案：
使用自包含令牌，通过客户端保存数据，而服务器不保存会话数据。 JWT是这种解决方案的代表。
三、JWT令牌
1、访问令牌的类型
2、JWT的组成
典型的，一个JWT看起来如下图：
该对象为一个很长的字符串，字符之间通过"."分隔符分为三个子串。
每一个子串表示了一个功能块，总共有以下三个部分：JWT头、有效载荷和签名
2.1 JWT头
JWT头部分是一个描述JWT元数据的JSON对象，通常如下所示。
{
"alg": "HS256",
"typ": "JWT"
}
在上面的代码中，alg属性表示签名使用的算法，默认为HMAC SHA256（写为HS256）；typ属性表示令牌的类型，JWT令牌统一写为JWT。最后，使用Base64 URL算法将上述JSON对象转换为字符串保存。
2.2 有效载荷
有效载荷部分，是JWT的主体内容部分，也是一个JSON对象，包含需要传递的数据。 JWT指定七个默认字段供选择。
iss：发行人
exp：到期时间
sub：主题
aud：用户
nbf：在此之前不可用
iat：发布时间
jti：JWT ID用于标识该JWT
除以上默认字段外，我们还可以自定义私有字段，如下例：
{
"sub": "1234567890",
"name": "Helen",
"admin": true
}
请注意，默认情况下JWT是未加密的，任何人都可以解读其内容，因此不要构建隐私信息字段，存放保密信息，以防止信息泄露。
JSON对象也使用Base64 URL算法转换为字符串保存。
2.3 签名哈希
签名哈希部分是对上面两部分数据签名，通过指定的算法生成哈希，以确保数据不会被篡改。
首先，需要指定一个密码（secret）。该密码仅仅为保存在服务器中，并且不能向用户公开。然后，使用标头中指定的签名算法（默认情况下为HMAC SHA256）根据以下公式生成签名。
1
HMACSHA256(base64UrlEncode(header) + "." + base64UrlEncode(claims), secret)
在计算出签名哈希后，JWT头，有效载荷和签名哈希的三个部分组合成一个字符串，每个部分用"."分隔，就构成整个JWT对象。
2.4 Base64URL算法
如前所述，JWT头和有效载荷序列化的算法都用到了Base64URL。该算法和常见Base64算法类似，稍有差别。
作为令牌的JWT可以放在URL中（例如api.example/?token=xxx）。 Base64中用的三个字符是"+"，"/“和”="，由于在URL中有特殊含义，因此Base64URL中对他们做了替换："=“去掉，”+“用”-“替换，”/“用”_"替换，这就是Base64URL算法。
3、JWT的原则
JWT的原则是在服务器身份验证之后，将生成一个JSON对象并将其发送回用户，如下所示。
{
"sub": "1234567890",
"name": "Helen",
"admin": true
}
之后，当用户与服务器通信时，客户在请求中发回JSON对象。服务器仅依赖于这个JSON对象来标识用户。为了防止用户篡改数据，服务器将在生成对象时添加签名。
服务器不保存任何会话数据，即服务器变为无状态，使其更容易扩展。
4、JWT的用法
客户端接收服务器返回的JWT，将其存储在Cookie或localStorage中。
此后，客户端将在与服务器交互中都会带JWT。如果将它存储在Cookie中，就可以自动发送，但是不会跨域，因此一般是将它放入HTTP请求的Header Authorization字段中。当跨域时，也可以将JWT被放置于POST请求的数据主体中。
5、JWT问题和趋势
1、JWT不仅可用于认证，还可用于信息交换。善用JWT有助于减少服务器请求数据库的次数。
2、生产的token可以包含基本信息，比如id、用户昵称、头像等信息，避免再次查库
3、存储在客户端，不占用服务端的内存资源
4、JWT默认不加密，但可以加密。生成原始令牌后，可以再次对其进行加密。
5、当JWT未加密时，一些私密数据无法通过JWT传输。
6、JWT的最大缺点是服务器不保存会话状态，所以在使用期间不可能取消令牌或更改令牌的权限。也就是说，一旦JWT签发，在有效期内将会一直有效。
7、JWT本身包含认证信息，token是经过base64编码，所以可以解码，因此token加密前的对象不应该包含敏感信息，一旦信息泄露，任何人都可以获得令牌的所有权限。为了减少盗用，JWT的有效期不宜设置太长。对于某些重要操作，用户在使用时应该每次都进行进行身份验证。
8、为了减少盗用和窃取，JWT不建议使用HTTP协议来传输代码，而是使用加密的HTTPS协议进行传输。
四、整合JWT令牌
1、在common_utils模块中添加jwt工具依赖
在pom中添加
<dependencies>
<!-- JWT-->
<dependency>
<groupId>io.jsonwebtoken</groupId>
<artifactId>jjwt</artifactId>
</dependency>
</dependencies>
2、创建JWT工具类
package com.yunxun.commonutils;
import io.jsonwebtoken.Claims;
import io.jsonwebtoken.Jws;
import io.jsonwebtoken.Jwts;
import io.jsonwebtoken.SignatureAlgorithm;
import org.springframework.http.server.reactive.ServerHttpRequest;
import org.springframework.util.StringUtils;
import javax.servlet.http.HttpServletRequest;
import java.util.Date;
/**
* @author helen
* @since 2019/10/16
*/
public class JwtUtils {
// 常量
public static final long EXPIRE = 1000 * 60 * 60 * 24; //设置token过期时间
public static final String APP_SECRET = "ukc8BDbRigUDaY6pZFfWus2jZWLPHO"; //加密秘钥
//生成token令牌字符串的方法
public static String getJwtToken(String id, String nickname){
String JwtToken = Jwts.builder()
.setHeaderParam("typ", "JWT") //设置JWT表头
.setHeaderParam("alg", "HS256")
.setSubject("yunxun-user") //设置过期时间
.setIssuedAt(new Date())
.setExpiration(new Date(System.currentTimeMillis() + EXPIRE))
.claim("id", id)
.claim("nickname", nickname) 设置token主体部分
.signWith(SignatureAlgorithm.HS256, APP_SECRET)// 签名哈希。防伪标志
.compact();
return JwtToken;
}
/**
* 判断token是否存在与有效
* @param jwtToken
* @return
*/
public static boolean checkToken(String jwtToken) {
if(StringUtils.isEmpty(jwtToken)) return false;
try {
Jwts.parser().setSigningKey(APP_SECRET).parseClaimsJws(jwtToken);
} catch (Exception e) {
e.printStackTrace();
return false;
}
return true;
}
/**
* 判断token是否存在与有效
* @param request
* @return
*/
public static boolean checkToken(HttpServletRequest request) {
try {
String jwtToken = request.getHeader("token");
if(StringUtils.isEmpty(jwtToken)) return false;
Jwts.parser().setSigningKey(APP_SECRET).parseClaimsJws(jwtToken);
} catch (Exception e) {
e.printStackTrace();
return false;
}
return true;
}
/**
* 根据token获取会员id
* @param request
* @return
*/
public static String getMemberIdByJwtToken(HttpServletRequest request) {
String jwtToken = request.getHeader("token");
if(StringUtils.isEmpty(jwtToken)) return "";
Jws<Claims> claimsJws = Jwts.parser().setSigningKey(APP_SECRET).parseClaimsJws(jwtToken);
Claims claims = claimsJws.getBody();
return (String)claims.get("id");
}
}
五、整合阿里云短信服务
1、在service模块下创建子模块service_msm
2、在service_msm创建controller和service代码
3、配置application.properties
# 服务端口
server.port=8005
# 服务名
spring.application.name=service-msm
# mysql数据库连接
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/yunxun?serverTimezone=GMT%2B8
spring.datasource.username=root
spring.datasource.password=root
spring.redis.host=192.168.44.132
spring.redis.port=6379
spring.redis.database= 0
spring.redis.timeout=1800000
spring.redis.lettuce.pool.max-active=20
spring.redis.lettuce.pool.max-wait=-1
#最大阻塞等待时间(负数表示没限制)
spring.redis.lettuce.pool.max-idle=5
spring.redis.lettuce.pool.min-idle=0
#最小空闲
#返回json的全局时间格式
spring.jackson.date-format=yyyy-MM-dd HH:mm:ss
spring.jackson.time-zone=GMT+8
#mybatis日志
mybatis-plus.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl
4. 创建启动类
创建ServiceMsmApplication.java
package com.atguigu.msmservice;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.autoconfigure.jdbc.DataSourceAutoConfiguration;
import org.springframework.context.annotation.ComponentScan;
@SpringBootApplication(exclude = DataSourceAutoConfiguration.class)
@ComponentScan("com.atguigu")
public class MsmApplication {
public static void main(String[] args) {
SpringApplication.run(MsmApplication.class, args);
}
}
六、阿里云短信服务
1、开通阿里云短信服务
2、添加签名管理与模板管理
**（1）添加模板管理
选择 国内消息 - 模板管理 - 添加模板
点击提交，等待审核，审核通过后可以使用
（2）添加签名管理
2.1选择 国内消息 - 签名管理 - 添加签名
2.2点击添加签名，进入添加页面，填入相关信息
注意：签名要写的有实际意义
2.3点击提交，等待审核，审核通过后可以使用
七、编写阿里云发送短信接口
1、在service-msm的pom中引入依赖
<dependencies>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
</dependency>
<dependency>
<groupId>com.aliyun</groupId>
<artifactId>aliyun-java-sdk-core</artifactId>
</dependency>
</dependencies>
2、编写MsmController，根据手机号发送短信
package com.atguigu.msmservice.controller;
import com.atguigu.commonutils.R;
import com.atguigu.msmservice.service.MsmService;
import com.atguigu.msmservice.utils.RandomUtil;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.*;
import java.util.HashMap;
import java.util.Map;
import java.util.concurrent.TimeUnit;
@RestController
@RequestMapping("/edumsm/msm")
@CrossOrigin
public class MsmController {
@Autowired
private MsmService msmService;
@Autowired
private RedisTemplate<String,String> redisTemplate;
//发送短信的方法
@GetMapping("send/{phone}")
public R sendMsm(@PathVariable String phone) {
//1 从redis获取验证码，如果获取到直接返回
String code = redisTemplate.opsForValue().get(phone);
if(!StringUtils.isEmpty(code)) {
return R.ok();
}
//2 如果redis获取 不到，进行阿里云发送
//生成随机值，传递阿里云进行发送
code = RandomUtil.getFourBitRandom();
Map<String,Object> param = new HashMap<>();
param.put("code",code);
//调用service发送短信的方法
boolean isSend = msmService.send(param,phone);
if(isSend) {
//发送成功，把发送成功验证码放到redis里面
//设置有效时间
redisTemplate.opsForValue().set(phone,code,5, TimeUnit.MINUTES);
return R.ok();
} else {
return R.error().message("短信发送失败");
}
}
}
3、编写MsmService 和 MsmServiceImpl
package com.yunxun.msmservice.service.impl;
import com.alibaba.fastjson.JSONObject;
import com.aliyuncs.CommonRequest;
import com.aliyuncs.CommonResponse;
import com.aliyuncs.DefaultAcsClient;
import com.aliyuncs.IAcsClient;
import com.aliyuncs.exceptions.ClientException;
import com.aliyuncs.http.MethodType;
import com.aliyuncs.profile.DefaultProfile;
import com.yunxun.msmservice.service.MsmService;
import org.springframework.stereotype.Service;
import org.springframework.util.StringUtils;
import java.util.Map;
@Service
public class MsmServiceImpl implements MsmService {
//发送短信的方法
@Override
public boolean send(Map<String, Object> param, String phone) {
//判断手机号是否为空
if(!StringUtils.isEmpty(phone)) return false;
//创建传输对象，让阿里云短信服务接收
// regionId 地域节点， accessKeyId 秘钥
DefaultProfile profile = DefaultProfile.getProfile("default", "填写你秘钥ID", "填写你的秘钥名称");
IAcsClient client = new DefaultAcsClient(profile);
//设置相关固定的参数
CommonRequest request = new CommonRequest();
//request.setProtocol(ProtocolType.HTTPS);
request.setMethod(MethodType.POST); //请求方式
request.setDomain("dysmsapi.aliyuncs.com"); //请求阿里云领域
request.setVersion("2017-05-25"); //版本号
request.setAction("SendSms"); //请求什么方法
//设置发送相关参数
request.putQueryParameter("PhoneNumbers",phone); //手机号
request.putQueryParameter("SignName","填写你的签名名称"); //申请阿里云 签名名称
request.putQueryParameter("TemplateCode","填写你的模板code"); //申请阿里云 模板code
//验证码数据，通过fastjson依赖包中的toJSONString()方法转化为json数据传递
request.putQueryParameter("TemplateParms", JSONObject.toJSONString(param));
try {
//最终发布
CommonResponse response = client.getCommonResponse(request);
//判断是否传输成功
boolean success = response.getHttpResponse().isSuccess();
return success;
} catch (Exception e) {
e.printStackTrace();
}
return false;
}
}
3.1 Redis解决验证码有效时间—5分钟有效
八、用户登录与注册微服务
1、后端—在service模块下创建子模块service-ucenter
2、使用代码生成器生成代码
（1）创建ucenter_member表
（2）利用代码生成器 CodeGenerator 生成代码
3、配置service-ucenter 中的application.properties
# 服务端口
server.port=8006
# 服务名
spring.application.name=service-msm
# mysql数据库连接
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/yunxun?serverTimezone=GMT%2B8
spring.datasource.username=root
spring.datasource.password=root
#spring.redis.host=192.168.44.132
#spring.redis.port=6379
#spring.redis.database= 0
#spring.redis.timeout=1800000
#spring.redis.lettuce.pool.max-active=20
#spring.redis.lettuce.pool.max-wait=-1
#最大阻塞等待时间(负数表示没限制)
#spring.redis.lettuce.pool.max-idle=5
#spring.redis.lettuce.pool.min-idle=0
#最小空闲
#返回json的全局时间格式
spring.jackson.date-format=yyyy-MM-dd HH:mm:ss
spring.jackson.time-zone=GMT+8
#配置mapper xml文件的路径
mybatis-plus.mapper-locations=classpath:com/yunxun/educenter/mapper/xml/*.xml
#mybatis日志
mybatis-plus.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl
4、创建启动类
创建UcenterApplication.java
@SpringBootApplication //取消数据源自动配置
@ComponentScan("com.yunxun")
@MapperScan("com.yunxun.educenter.mapper")
public class UcenterApplication {
public static void main(String[] args) {
SpringApplication.run(UcenterApplication.class,args);
}
}
5、创建登录和注册接口
1、创建LoginVo和RegisterVo用于数据封装
LoginVo
@Data
@ApiModel(value="登录对象", description="登录对象")
public class LoginVo {
@ApiModelProperty(value = "手机号")
private String mobile;
@ApiModelProperty(value = "密码")
private String password;
}
RegisterVo
@Data
@ApiModel(value="注册对象", description="注册对象")
public class RegisterVo {
@ApiModelProperty(value = "昵称")
private String nickname;
@ApiModelProperty(value = "手机号")
private String mobile;
@ApiModelProperty(value = "密码")
private String password;
@ApiModelProperty(value = "验证码")
private String code;
}
2、创建controller编写登录和注册方法
MemberApiController.java
@RestController
@RequestMapping("/ucenterservice/apimember")
@CrossOrigin
public class MemberApiController {
@Autowired
private MemberService memberService;
@ApiOperation(value = "会员登录")
@PostMapping("login")
public R login(@RequestBody LoginVo loginVo) {
String token = memberService.login(loginVo);
return R.ok().data("token", token);
}
@ApiOperation(value = "会员注册")
@PostMapping("register")
public R register(@RequestBody RegisterVo registerVo){
memberService.register(registerVo);
return R.ok();
}
}
3、创建service接口和实现类
@Service
public class UcenterMemberServiceImpl extends ServiceImpl<UcenterMemberMapper, UcenterMember> implements UcenterMemberService {
@Autowired //注入redis
private RedisTemplate<String,String> redisTemplate;
//登录操作---member对象中只封装手机号和密码
@Override
public String login(UcenterMember member) {
//获取登录手机号和密码
String mobile = member.getMobile();
String password = member.getPassword();
//手机号和密码非空判断
if(StringUtils.isEmpty(mobile)||StringUtils.isEmpty(password)){
throw new YunException(20001,"登录失败");
}
//获取会员 ---判断手机号是否正确
QueryWrapper<UcenterMember> wrapper = new QueryWrapper<>();
wrapper.eq("mobile",mobile);
UcenterMember mobileMember = baseMapper.selectOne(wrapper);
//判断查询的对象是否为空 ---mobileMember中包含了用户所有信息
if(mobileMember == null){
throw new YunException(20001,"登录失败,没有这个手机号");
}
//判断密码是否正确
//因存储到数据库的密码进行了加密处理，所以我们需把输入的密码进行加密，再和数据库中的密码进行比较
// 加密方式 MD5--只加密不解密 使用MD5 工具类
if(!MD5.encrypt(password).equals(mobileMember.getPassword())){
throw new YunException(20001,"登录失败,密码错误");
}
//判断对象是否被禁用
if(mobileMember.getIsDeleted()){
throw new YunException(20001,"登录失败，用户被禁用");
}
//上述都能通过，表示登录成功，即生成token字符串,返回给cookie。使用JWT工具类
String jwtToken = JwtUtils.getJwtToken(mobileMember.getId(), mobileMember.getNickname());
return jwtToken;
}
//注册
@Override
public void register(RegisterVo registerVo) {
//获取注册的数据,进行校验
String code = registerVo.getCode();
String mobile = registerVo.getMobile();
String nickname = registerVo.getNickname();
String password = registerVo.getPassword();
//注册信息的非空判断
if(StringUtils.isEmpty(code)||StringUtils.isEmpty(mobile)
||StringUtils.isEmpty(nickname) ||StringUtils.isEmpty(password)){
throw new YunException(20001,"注册失败");
}
//判断验证码是否正确
//先从缓存中获取验证码
// String redisCode = redisTemplate.opsForValue().get(mobile);
// if(!code.equals(redisCode)){
// throw new YunException(20001,"验证码不正确");
// }
//判断手机号是否重复，数据库里存在相同则不能添加
QueryWrapper<UcenterMember> centerWrapper = new QueryWrapper<>();
centerWrapper.eq("mobile",mobile);
Integer count = baseMapper.selectCount(centerWrapper);
if(count>0){
throw new YunException(20001,"注册失败，手机号重复");
}
//将注册数据添加到数据库
UcenterMember centerMember = new UcenterMember();
centerMember.setMobile(mobile);
centerMember.setIsDisabled(false); //用户不禁用
centerMember.setPassword(MD5.encrypt(password)); //MD5加密
centerMember.setNickname(nickname);
centerMember.setAvatar("http://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83eoj0hHXhgJNOTSOFsS4uZs8x1ConecaVOB8eIl115xmJZcT4oCicvia7wMEufibKtTLqiaJeanU2Lpg3w/132");
baseMapper.insert(centerMember);
}
}
6、创建接口根据token获取用户信息
在MemberApiController中创建方法
@ApiOperation(value = "根据token获取登录信息")
@GetMapping("auth/getLoginInfo")
public R getLoginInfo(HttpServletRequest request){
try {
String memberId = JwtUtils.getMemberIdByJwtToken(request);
LoginInfoVo loginInfoVo = memberService.getLoginInfo(memberId);
return R.ok().data("item", loginInfoVo);
}catch (Exception e){
e.printStackTrace();
throw new GuliException(20001,"error");
}
}
创建service
@Override
public LoginInfoVo getLoginInfo(String memberId) {
Member member = baseMapper.selectById(memberId);
LoginInfoVo loginInfoVo = new LoginInfoVo();
BeanUtils.copyProperties(member, loginInfoVo);
return loginInfoVo;
}
7、前端—在nuxt环境中安装插件
7.1、安装element-ui 和 vue-qriously
（1）执行命令安装
npm install element-ui —页面插件
npm install vue-qriously —微信支付二维码
7.2、修改plugin包下的配置文件 nuxt-swiper-plugin.js，使用插件
nuxt-swiper-plugin.js
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper/dist/ssr'
import VueQriously from 'vue-qriously'
import ElementUI from 'element-ui' //element-ui的全部组件
import 'element-ui/lib/theme-chalk/index.css'//element-ui的css
Vue.use(ElementUI) //使用elementUI
Vue.use(VueQriously)
Vue.use(VueAwesomeSwiper)
7.3、用户注册功能前端整合
7.3.1、在api文件夹中创建注册的js文件，定义接口
register.js
import request from '@/utils/request'
export default {
//根据手机号发送验证码
sendCode(phone) {
return request({
url: `/edumsm/msm/send/${phone}`,
method: 'get'
})
},
//注册方法
registerMember(formItem){
return request({
url: `/educenter/member/register`,
method: 'post',
data: formItem
})
}
}
7.3.2、在pages文件夹中创建注册页面，调用方法
（1）在layouts创建布局页面—sign.vue
<template>
<div class="sign">
<!--标题-->
<div class="logo">
<img src="~/assets/img/logo.png" alt="logo">
</div>
<!--表单-->
<nuxt/>
</div>
</template>
（2）创建注册页面
修改layouts文件夹里面default.vue页面，修改登录和注册超链接地址
<li id="no-login">
<a href="/login" title="登录">
<em class="icon18 login-icon"> </em>
<span class="vam ml5">登录</span>
</a>
|
<a href="/register" title="注册">
<span class="vam ml5">注册</span>
</a>
</li>
在pages文件夹下，创建注册和登录页面
register.vue
<template>
<div class="main">
<div class="title">
<a href="/login">登录</a>
<span>·</span>
<a class="active" href="/register">注册</a>
</div>
<div class="sign-up-container">
<el-form ref="userForm" :model="params">
<el-form-item class="input-prepend restyle" prop="nickname" :rules="[{ required: true, message: '请输入你的昵称', trigger: 'blur' }]">
<div>
<el-input type="text" placeholder="你的昵称" v-model="params.nickname"/>
<i class="iconfont icon-user"/>
</div>
</el-form-item>
<el-form-item class="input-prepend restyle no-radius" prop="mobile" :rules="[{ required: true, message: '请输入手机号码', trigger: 'blur' },{validator: checkPhone, trigger: 'blur'}]">
<div>
<el-input type="text" placeholder="手机号" v-model="params.mobile"/>
<i class="iconfont icon-phone"/>
</div>
</el-form-item>
<el-form-item class="input-prepend restyle no-radius" prop="code" :rules="[{ required: true, message: '请输入验证码', trigger: 'blur' }]">
<div style="width: 100%;display: block;float: left;position: relative">
<el-input type="text" placeholder="验证码" v-model="params.code"/>
<i class="iconfont icon-phone"/>
</div>
<div class="btn" style="position:absolute;right: 0;top: 6px;width: 40%;">
<a href="javascript:" type="button" @click="getCodeFun()" :value="codeTest" style="border: none;background-color: none">{{codeTest}}</a>
</div>
</el-form-item>
<el-form-item class="input-prepend" prop="password" :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]">
<div>
<el-input type="password" placeholder="设置密码" v-model="params.password"/>
<i class="iconfont icon-password"/>
</div>
</el-form-item>
<div class="btn">
<input type="button" class="sign-up-button" value="注册" @click="submitRegister()">
</div>
<p class="sign-up-msg">
点击 “注册” 即表示您同意并愿意遵守简书
<br>
<a target="_blank" href="http://www.jianshu.com/p/c44d171298ce">用户协议</a>
和
<a target="_blank" href="http://www.jianshu.com/p/2ov8x3">隐私政策</a> 。
</p>
</el-form>
<!-- 更多注册方式 -->
<div class="more-sign">
<h6>社交帐号直接注册</h6>
<ul>
<li><a id="weixin" class="weixin" target="_blank" href="http://huaan.free.idcfengye.com/api/ucenter/wx/login"><i
class="iconfont icon-weixin"/></a></li>
<li><a id="qq" class="qq" target="_blank" href="#"><i class="iconfont icon-qq"/></a></li>
</ul>
</div>
</div>
</div>
</template>
<script>
import '~/assets/css/sign.css'
import '~/assets/css/iconfont.css'
import registerApi from '@/api/register'
export default {
layout: 'sign',
data() {
return {
params: { //封装注册输入数据
mobile: '',
code: '', //验证码
nickname: '',
password: ''
},
sending: true, //是否发送验证码
second: 60, //倒计时间
codeTest: '获取验证码'
}
},
methods: {
//注册提交的方法
submitRegister() {
registerApi.registerMember(this.params)
.then(response => {
//提示注册成功
this.$message({
type: 'success',
message: "注册成功"
})
//跳转登录页面
this.$router.push({path:'/login'})
})
},
timeDown() {
let result = setInterval(() => {
--this.second;
this.codeTest = this.second
if (this.second < 1) {
clearInterval(result);
this.sending = true;
//this.disabled = false;
this.second = 60;
this.codeTest = "获取验证码"
}
}, 1000);
},
//通过输入手机号发送验证码
getCodeFun() {
registerApi.sendCode(this.params.mobile)
.then(response => {
this.sending = false
//调用倒计时的方法
this.timeDown()
})
},
checkPhone (rule, value, callback) {
//debugger
if (!(/^1[34578]\d{9}$/.test(value))) {
return callback(new Error('手机号码格式不正确'))
}
return callback()
}
}
}
</script>
login.vue
<template>
<div class="main">
<div class="title">
<a class="active" href="/login">登录</a>
<span>·</span>
<a href="/register">注册</a>
</div>
<div class="sign-up-container">
<el-form ref="userForm" :model="user">
<el-form-item class="input-prepend restyle" prop="mobile" :rules="[{ required: true, message: '请输入手机号码', trigger: 'blur' },{validator: checkPhone, trigger: 'blur'}]">
<div >
<el-input type="text" placeholder="手机号" v-model="user.mobile"/>
<i class="iconfont icon-phone" />
</div>
</el-form-item>
<el-form-item class="input-prepend" prop="password" :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]">
<div>
<el-input type="password" placeholder="密码" v-model="user.password"/>
<i class="iconfont icon-password"/>
</div>
</el-form-item>
<div class="btn">
<input type="button" class="sign-in-button" value="登录" @click="submitLogin()">
</div>
</el-form>
<!-- 更多登录方式 -->
<div class="more-sign">
<h6>社交帐号登录</h6>
<ul>
<li><a id="weixin" class="weixin" target="_blank" href="http://qy.free.idcfengye.com/api/ucenter/weixinLogin/login"><i class="iconfont icon-weixin"/></a></li>
<li><a id="qq" class="qq" target="_blank" href="#"><i class="iconfont icon-qq"/></a></li>
</ul>
</div>
</div>
</div>
</template>
<script>
import '~/assets/css/sign.css'
import '~/assets/css/iconfont.css'
import cookie from 'js-cookie'
export default {
layout: 'sign',
data () {
return {
user:{
mobile:'',
password:''
},
loginInfo:{}
}
},
methods: {
checkPhone (rule, value, callback) {
//debugger
if (!(/^1[34578]\d{9}$/.test(value))) {
return callback(new Error('手机号码格式不正确'))
}
return callback()
}
}
}
</script>
<style>
.el-form-item__error{
z-index: 9999999;
}
</style>
7.3.3、用户登录功能前端整合
7.3.3.1、在api文件夹中创建登录的js文件，定义接口
login.js
import request from '@/utils/request'
export default {
//根据手机号登录
submitLogin(userInfo) {
return request({
url: `/educenter/member/login`,
method: 'post',
data: userInfo
})
},
//根据token获取用户信息---参数request在另外地方进行设置
getLoginUserInfo(){
return request({
url: `/educenter/member/getMemberInfo`,
method: 'get'
})
}
}
7.3.3.2、在pages文件夹中创建登录页面，调用方法
（1）安装js-cookie插件
npm install js-cookie
（2）login.vue
<template>
<div class="main">
<div class="title">
<a class="active" href="/login">登录</a>
<span>·</span>
<a href="/register">注册</a>
</div>
<div class="sign-up-container">
<el-form ref="userForm" :model="user">
<el-form-item class="input-prepend restyle" prop="mobile" :rules="[{ required: true, message: '请输入手机号码', trigger: 'blur' },{validator: checkPhone, trigger: 'blur'}]">
<div >
<el-input type="text" placeholder="手机号" v-model="user.mobile"/>
<i class="iconfont icon-phone" />
</div>
</el-form-item>
<el-form-item class="input-prepend" prop="password" :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]">
<div>
<el-input type="password" placeholder="密码" v-model="user.password"/>
<i class="iconfont icon-password"/>
</div>
</el-form-item>
<div class="btn">
<input type="button" class="sign-in-button" value="登录" @click="submitLogin()">
</div>
</el-form>
<!-- 更多登录方式 -->
<div class="more-sign">
<h6>社交帐号登录</h6>
<ul>
<li><a id="weixin" class="weixin" target="_blank" href="http://qy.free.idcfengye.com/api/ucenter/weixinLogin/login"><i class="iconfont icon-weixin"/></a></li>
<li><a id="qq" class="qq" target="_blank" href="#"><i class="iconfont icon-qq"/></a></li>
</ul>
</div>
</div>
</div>
</template>
<script>
import '~/assets/css/sign.css'
import '~/assets/css/iconfont.css'
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('yunxun_token',response.data.data.token,{domain: 'localhost'})
//第四步 调用接口 根据token获取用户信息，为了首页面显示
loginApi.getLoginUserInfo()
.then(response => {
this.loginInfo = response.data.data.userInfo
//获取返回用户信息，放到cookie里面
cookie.set('gyunxun_ucenter',this.loginInfo,{domain: 'localhost'})
//跳转首先页面
//this.$router.push({path:'/'}) 两种方法都可以
window.location.href = "/";
})
})
},
checkPhone (rule, value, callback) {
//debugger
if (!(/^1[34578]\d{9}$/.test(value))) {
return callback(new Error('手机号码格式不正确'))
}
return callback()
}
}
}
</script>
<style>
.el-form-item__error{
z-index: 9999999;
}
</style>
3、在request.js添加拦截器，用于传递token信息
import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import cookie from 'js-cookie'
// 创建axios实例
const service = axios.create({
//baseURL: 'http://qy.free.idcfengye.com/api', // api 的 base_url
//baseURL: 'http://localhost:8210', // api 的 base_url
baseURL: 'http://localhost:9001',
timeout: 15000 // 请求超时时间
})
// http request 拦截器，每次发送请求都使用这个拦截器（interceptors）
service.interceptors.request.use(
config => {
//debugger
// 判断cookie里面是否有名称为yunxun_token数据
if (cookie.get('yunxun_token')) {
//把获取cookie值放到header里面
config.headers['token'] = cookie.get('yunxun_token');
}
return config
},
err => {
return Promise.reject(err);
})
// http response 拦截器
service.interceptors.response.use(
response => {
//debugger
if (response.data.code == 28004) {
console.log("response.data.resultCode是28004")
// 返回 错误代码-1 清除ticket信息并跳转到登录页面
//debugger
window.location.href="/login"
return
}else{
if (response.data.code !== 20000) {
//25000：订单支付中，不做任何提示
if(response.data.code != 25000) {
Message({
message: response.data.message || 'error',
type: 'error',
duration: 5 * 1000
})
}
} else {
return response;
}
}
},
error => {
return Promise.reject(error.response) // 返回接口返回的错误信息
});
export default service
4、修改layouts中的default.vue页面
（1）显示登录之后的用户信息
<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 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)
if(this.token) {//判断路径是否有token值
this.wxLogin()
}
this.showInfo()
},
methods:{
//微信登录显示的方法
wxLogin() {
//console.log('************'+this.token)
//把token值放到cookie里面
cookie.set('yunxun_token',this.token,{domain: 'localhost'})
cookie.set('yunxun_ucenter','',{domain: 'localhost'})
//console.log('====='+cookie.get('guli_token'))
//调用接口，根据token值获取用户信息
loginApi.getLoginUserInfo()
.then(response => {
// console.log('################'+response.data.data.userInfo)
this.loginInfo = response.data.data.userInfo
cookie.set('yunxun_ucenter',this.loginInfo,{domain: 'localhost'})
})
},
//创建方法，从cookie获取用户信息
showInfo() {
//从cookie获取用户信息
var userStr = cookie.get('yunxun_ucenter')
// 把字符串转换json对象(js对象) 因从cookie中获取的值"{'name':'luncy','age':20}" 格式
if(userStr) {
this.loginInfo = JSON.parse(userStr)
}
},
//退出
logout() {
//清空cookie值
cookie.set('yunxun_token','',{domain: 'localhost'})
cookie.set('yunxun_ucenter','',{domain: 'localhost'})
//回到首页面
window.location.href = "/";
}
}
};
</script>
（2）default.vue页面显示登录之后的用户信息
<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 ml5">登录</span>
</a>
|
<a href="/register" title="注册">
<span class="vam ml5">注册</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>
<li v-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="userName" class="vam disIb">{{ loginInfo.nickname }}</span>
</a>
<a href="javascript:void(0);" title="退出" @click="logout()" class="ml5">退出</a>
</li>
<!-- /未登录显示第1 li；登录后显示第2，3 li -->
</ul>
7.3.3.3、登出操作
//退出
logout() {
//清空cookie值
cookie.set('yunxun_token','',{domain: 'localhost'})
cookie.set('yunxun_token','',{domain: 'localhost'})
//回到首页面
window.location.href = "/";
}