黑马程序员技术交流社区

标题: 【郑州校区】Java的新项目学成在线笔记-day18（六） [打印本页]

---

作者: 谷粒姐姐    时间: 2019-7-9 14:22
标题: 【郑州校区】Java的新项目学成在线笔记-day18（六）


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

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

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、点击“教学提供方”，此时由于没有登录自动跳转到登录页面


4.2.2  携带JWT授权
1、前端携带JWT请求
根据需求，在使用axios进行http请求前向header中加入jwt令牌 在main.js中添加

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

import axios from 'axios'  

 // 添加请求拦截器 axios.interceptors.request.use(function (config) {

   // 在发送请求向header添加jwt   let jwt = utilApi.getJwt()  

 if(jwt){

     config.headers['Authorization'] = 'Bearer '+jwt 

  } 

  return config; }, function (error) {  

 return Promise.reject(error); });

2、测试http请求是否携带jwt
进入教学管理中心，点击我的课程，观察request header中是否有Authorization信息


3、测试授权效果
当访问一个没有权限的方法时是否报错？
测试方法：
在课程计划查询方法上添加授权注解，表示当前用户需要拥有course_teachplan_list权限方可正常访问。

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

@PreAuthorize("hasAuthority('course_teachplan_list')") 

@Override public TeachplanNode findTeachplanList(@PathVariable("courseId") String courseId) {  

   return courseService.findTeachplanList(courseId); }

进入我的课程，点击课程计划，观察响应结果为 10002错误。


4、提示权限不足
当权限不足首页要给出提示，实现思路是使用axios的拦截，在执行后校验响应结果，如果是10002代码的错误则 提示用户“权限不足”，如果是10001代码则强制登录。 在main.js中添加

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

 

@PreAuthorize("hasAuthority('course_teachplan_list')") 

@Override public TeachplanNode findTeachplanList(@PathVariable("courseId") String courseId) {  

   return courseService.findTeachplanList(courseId); }

// 响应拦截 axios.interceptors.response.use(data => {  

 console.log("data=")  

 console.log(data) 

  if(data && data.data){  

   if(data.data.code && data.data.code =='10001'){    

   //需要登录    

    window.location = "http://ucenter.xuecheng.com/#/login?returnUrl="+  Base64.encode(window.location)   

  }else if(data.data.code && data.data.code =='10002'){   

    Message.error('您没有此操作的权限，请与客服联系！

');   

  }

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

 } 

  return data })

测试：
执行一个没有权限的操作，提示如下：

---

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

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