1.3.6 テストは、
テストと認証サービスは、設定を変更する前に、次
の変更は application.yml クッキーのドメイン名を
cookieDomain: xuecheng.com：次のようにテストプロセスがある
1を入力し、www.xuecheng.comを（必要とするシステムにホストの設定ファイルを）
1 、提出、正しい口座番号とパスワードを入力して
2を、間違った口座番号とパスワードを入力し、提出する
ログインに成功し、観察クッキーを成功格納されます。
2 フロントエンドユーザーが表示され、現在の
2.1 要件分析
成功ログイン・ディスプレイ現在ログインしているページヘッダのユーザ名。
1 、ユーザー要求の認証サービスは、ログインが成功しています。
2 、に成功したユーザのログイン認証サービスクッキー書かれたIDトークンにRedisのは、書き込みuser_token （アイデンティティトークンと認証のJWTの許可トークン）
3は、クライアントが運ぶクッキーGETにアイデンティティ認証トークン要求サービスをJWT トークン。
4 、クライアントパースJWT 解析された格納するトークンとユーザ情報のsessionStorageを内。
JWT トークンは、ユーザーの基本的な情報が含まれ、クライアントのパースは、JWT のユーザ情報を取得するトークン。
図5は、クライアントからのsessionStorageのユーザ情報が読み出され、ヘッダに表示されます。
sessionStorage ：
のsessionStorageは ありH5 に、セッション・ストレージ・オブジェクトのsessionStorage 格納されたデータは、同じウィンドウ内または同じタブでのみ有効です
ウィンドウ閉じた後に削除されますのsessionStorageのデータを。
seesionStorage ストレージ利用のキー/値の保存方法、5M のデータについては、（別のブラウザでは異なるであろう）。
2.2 JWT インタフェースクエリ
2.2.1 分析要件
と認証サービスは、外部提供JWT クエリインターフェイスを、次のようにプロセスがある：
1 、クライアントが運ぶクッキー取得するIDトークン認証サービス要求JWT
2を認証サービスからトークンアイデンティティによると、Redisのクエリは、JWT トークンおよびクライアントに戻り、それを。
2.2.2 API
認証モジュールで定義された JWT クエリインターフェイス：
@Api(value = "jwt查询接口",description = "客户端查询jwt令牌内容")
public interface AuthControllerApi {
@ApiOperation("查询userjwt令牌")
public JwtResult userjwt();
....2.2.3ダオ
なし
2.2.4サービス
でのAuthServiceには、次のように定義しました：
//从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コントローラ
@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 テスト
用いて郵便配達試験
1 、リクエスト userloginの/ AUTH /
2.3 先端要求がJWT
2.3.1 要求分析
遠位要件は以下の通りである：
ユーザーログインが成功すると、フロントエンドの認証サービス取得要求JWT トークン。
分析遠位JWT にユーザ情報、及びユーザ情報を提供するコンテンツトークンのsessionStorage 。
以下から のsessionStorage ヘッダにユーザ情報を表示するユーザ名を抽出します。
2.3.2 APIの方法
でlogin.js 定義getjwt 方法：
/*获取jwt令牌*/
const getjwt = () => {
return requestGet('/openapi/auth/userjwt');
}2.3.3 页面
修改include/header.html
1、页面视图
<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为当前用户信息。
数据对象定义如下：
user:{
userid:'',
username: '',
userpic: ''
},
logined:false2、解析jwt令牌
在util.js中定义解析jwt令牌方法：
//解析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
mounted(){
//刷新当前用户
this.refresh_user()
}refresh_user()方法如下：
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))
}
}
})
}
}
