黑马程序员技术交流社区

标题: 【郑州校区】学成在线-第17天-讲义-用户认证 Zuul 三 [打印本页]

作者: 我是楠楠 时间: 2020-1-8 15:17
标题: 【郑州校区】学成在线-第17天-讲义-用户认证 Zuul 三

【郑州校区】学成在线-第17天-讲义-用户认证 Zuul 三

1.3.6测试
测试之前修改认证服务的配置：
修改 application.yml中cookie域名

[AppleScript] 纯文本查看 复制代码

 cookieDomain: xuecheng.com

测试流程如下：
1、输入www.xuecheng.com进入系统（需要在hosts文件配置）
1、输入正确的账号和密码，提交
2、输入错误的账号和密码，提交
登录成功，观察cookie是否存储成功：

2 前端显示当前用户
2.1 需求分析
用户登录成功在页头显示当前登录的用户名称。

1、用户请求认证服务，登录成功。
2、用户登录成功，认证服务向cookie写入身份令牌，向redis写入user_token（身份令牌及授权jwt授权令牌）
3、客户端携带cookie中的身份令牌请求认证服务获取jwt令牌。
4、客户端解析jwt令牌，并将解析的用户信息存储到sessionStorage中。
jwt令牌中包括了用户的基本信息，客户端解析jwt令牌即可获取用户信息。
5、客户端从sessionStorage中读取用户信息，并在页头显示。
sessionStorage ：
sessionStorage 是H5的一个会话存储对象，在SessionStorage中保存的数据只在同一窗口或同一标签页中有效，
在关闭窗口之后将会删除SessionStorage中的数据。
seesionStorage的存储方式采用key/value的方式，可保存5M左右的数据（不同的浏览器会有区别）。
2.2 jwt查询接口
2.2.1 需求分析
认证服务对外提供jwt查询接口，流程如下：

1、客户端携带cookie中的身份令牌请求认证服务获取jwt
2、认证服务根据身份令牌从redis中查询jwt令牌并返回给客户端。
2.2.2 API
在认证模块定义 jwt查询接口：

[AppleScript] 纯文本查看 复制代码

 @Api(value = "jwt查询接口",description = "客户端查询jwt令牌内容")

public interface AuthControllerApi {

@ApiOperation("查询userjwt令牌")

public JwtResult userjwt();

....

2.2.3 Dao
无
2.2.4 Service
在AuthService中定义方法如下：

[AppleScript] 纯文本查看 复制代码

 //从redis查询令牌

public AuthToken getUserToken(String token){

String userToken = "user_token:"+token;

String userTokenString = stringRedisTemplate.opsForValue().get(userToken);

if(userToken!=null){

AuthToken authToken = null;

try {

authToken = JSON.parseObject(userTokenString, AuthToken.class);

} catch (Exception e) {

LOGGER.error("getUserToken from redis and execute JSON.parseObject error

{}",e.getMessage());

e.printStackTrace();

}

return authToken;

}

return null;

}

2.2.5 Controller

[AppleScript] 纯文本查看 复制代码

 @Override

@GetMapping("/userjwt")

public JwtResult userjwt() {

//获取cookie中的令牌

String access_token = getTokenFormCookie();

//根据令牌从redis查询jwt

AuthToken authToken = authService.getUserToken(access_token);

if(authToken == null){

return new JwtResult(CommonCode.FAIL,null);

}

return new JwtResult(CommonCode.SUCCESS,authToken.getJwt_token());

}

//从cookie中读取访问令牌

private String getTokenFormCookie(){

Map<String, String> cookieMap = CookieUtil.readCookie(request, "uid");

String access_token = cookieMap.get("uid");

return access_token;

}

2.2.6 测试
使用postman测试
1、请求 /auth/userlogin

2.3 前端请求jwt
2.3.1 需求分析
前端需求如下：
用户登录成功，前端请求认证服务获取jwt令牌。
前端解析jwt令牌的内容，得到用户信息，并将用户信息存储到sessionStorage。
从 sessionStorage取出用户信息在页头显示用户名称。
2.3.2 API方法
在login.js中定义getjwt方法：

[AppleScript] 纯文本查看 复制代码

/*获取jwt令牌*/

const getjwt = () => {

return requestGet('/openapi/auth/userjwt');

}

2.3.3 页面
修改include/header.html
1、页面视图

[AppleScript] 纯文本查看 复制代码

 <span v‐if="logined == true">欢迎{{this.user.username}}</span>

<a href="javascript:;" @click="logout" v‐if="logined == true">退出</a>

<a href="http://ucenter.xuecheng.com/" class="personal" target="_blank">我的学习</a>

<a href="javascript:;" @click="showlogin" v‐if="logined == false">登陆 | 注册</a>

<a href="http://teacher.xuecheng.com/" class="personal" target="_blank">教学提供方</a>

<a href="http://system.xuecheng.com/" class="personal" target="_blank">系统后台</a>

用户登录成功设置数据对象logined为true，设置数据对象user为当前用户信息。
数据对象定义如下：

[AppleScript] 纯文本查看 复制代码

 user:{

userid:'',

username: '',

userpic: ''

},

logined:false

2、解析jwt令牌
在util.js中定义解析jwt令牌方法：

[AppleScript] 纯文本查看 复制代码

 //解析jwt令牌，获取用户信息

var getUserInfoFromJwt = function (jwt) {

if(!jwt){

return ;

}

var jwtDecodeVal = jwt_decode(jwt);

if (!jwtDecodeVal) {

return ;

}

let activeUser={}

//console.log(jwtDecodeVal)

activeUser.utype = jwtDecodeVal.utype || '';

activeUser.username = jwtDecodeVal.name || '';

activeUser.userpic = jwtDecodeVal.userpic || '';

activeUser.userid = jwtDecodeVal.userid || '';

activeUser.authorities = jwtDecodeVal.authorities || '';

activeUser.uid = jwtDecodeVal.jti || '';

activeUser.jwt = jwt;

return activeUser;

}

3、refresh_user()
在mounted钩子方法中获取当前用户信息，并将用户信息存储到sessionStorage

[AppleScript] 纯文本查看 复制代码

 mounted(){

//刷新当前用户

this.refresh_user()

}

refresh_user()方法如下：

[AppleScript] 纯文本查看 复制代码

 refresh_user:function(){

//从sessionStorage中取出当前用户

let activeUser= getActiveUser();

//取出cookie中的令牌

let uid = getCookie("uid")

//console.log(activeUser)

if(activeUser && uid && uid == activeUser.uid){

this.logined = true

this.user = activeUser;

}else{

if(!uid){

return ;

}

//请求查询jwt

getjwt().then((res) => {

if(res.success){

let jwt = res.jwt;

let activeUser = getUserInfoFromJwt(jwt)

if(activeUser){

this.logined = true

this.user = activeUser;

setUserSession("activeUser",JSON.stringify(activeUser))

}

}

})

}

}

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2