学成在线-第18天-讲义-用户授权 四

4 前端集成认证授权 
4.1 需求分析 
截至目前认证授权服务端的功能已基本完成，本章实现前端集成认证授权功能。 
前端集成认证授权功能需要作如下工作： 
1、前端页面校验用户的身份，如果用户没有登录则跳转到登录页面 
2、前端请求资源服务需要在http header中添加jwt令牌，资源服务根据jwt令牌完成授权。 
哪些功能需要前端请求时携带JWT？ 
用户登录成功请求资源服务都需要携带jwt令牌，因为资源服务已经实现了jwt认证，如果校验头部没有jwt则会认为 
身份不合法。 
4.2教学管理中心 
本节实现教学管理中心实现身份校验，其它前端参考教学管理中心实现。
4.2.1 配置虚拟主机
教学管理前端访问微服务统一在访问地址前添加/api前缀并经过网关转发到微服务。 
配置teacher.xuecheng.com虚拟主机。

#前端教学管理
upstream teacher_server_pool{
server 127.0.0.1:12000 weight=10;
}
#文件服务
upstream filesystem_server_pool{
server 127.0.0.1:22100 weight=10;
}
#媒资服务
upstream media_server_pool{
server 127.0.0.1:31400 weight=10;
}
#学成网教学管理中心
server {
listen 80;
server_name teacher.xuecheng.com;
#个人中心
location / {
proxy_pass http://teacher_server_pool;
}
location /api {
proxy_pass http://api_server_pool;
}
location /filesystem {
proxy_pass http://filesystem_server_pool;
}
#媒资管理
location ^~ /api/media/ {
proxy_pass http://media_server_pool/media/;
}
#认证
location ^~ /openapi/auth/ {
proxy_pass http://auth_server_pool/auth/;
}
}

4.2.2身份校验 
教学管理中心是单页面应用，我们在路由变化时校验用户的身份，校验失败将跳转到登录页面。 
校验方法如下： 
1、如果成功从sessionStorage和cookie获取当前用户则继续访问 
2、如果sessionStorage中无当前用户，cookie中有当前用户则请求服务端获取jwt，如果成功则继续访问。 
3、以上两种情况都不满足则跳转到登录页面。
在main.js中添加路由监控代码，如下：

router.beforeEach((to, from, next) => {
if(openAuthenticate){
// console.log(to)
// console.log(from)
//***********身份校验***************
let activeUser
let uid
try{
activeUser = utilApi.getActiveUser()
uid = utilApi.getCookie("uid")
}catch(e){
//alert(e)
}
if(activeUser && uid && uid == activeUser.uid) {
next();
}else if(to.path =='/login' || to.path =='/logout'){
next();
}else if(uid){
//请求获取jwt
systemApi.getjwt().then((res)=>{
if(res.success){
let jwt = res.jwt;
let activeUser = utilApi.getUserInfoFromJwt(jwt)
if(activeUser){
utilApi.setUserSession("activeUser",JSON.stringify(activeUser))
}
next();
}else{
//跳转到统一登陆
window.location = "http://ucenter.xuecheng.com/#/login?returnUrl="+
Base64.encode(window.location)
}
})
}else{
//跳转到统一登陆
window.location = "http://ucenter.xuecheng.com/#/login?returnUrl="+
Base64.encode(window.location)
}
}else{
next();
}
});

2、在base/api/system.js中添加getjwt方法

/*获取jwt令牌*/
export const getjwt= () => {
return http.requestQuickGet('/openapi/auth/userjwt')
}

3、在utils.js中添加 如下方法

getActiveUser: function(){
let uid = this.getCookie("uid")
if(uid){
let activeUserStr = this.getUserSession("activeUser");
return JSON.parse(activeUserStr);
}else{
this.delUserSession("activeUser")
}
},
//获取jwt令牌
getJwt : function(){
let activeUser = this.getActiveUser()
if(activeUser){
return activeUser.jwt
}
},
//解析jwt令牌，获取用户信息
getUserInfoFromJwt : function (jwt) {
if(!jwt){
return ;
}
var jwtDecodeVal = jwtDecode(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;
},

4、测试 
1）启动学习中心前端、教学管理前端、认证服务、用户中心服务、网关、Eureka 
a、进入首页 
b、点击“教学提供方”，此时由于没有登录自动跳转到登录页面