這里對token的簡單的使用進行測試和描述
其原理就不在這里描述了!
具體測試流程:用戶在前端請求登錄——>在后台驗證通過后根據用戶ID生成token——>請求返回時將token帶給前端並存在前端——>以后前端再次請求時需要帶上token
——>后台接受到token並驗證,如果驗證通過,返回true,否則false(實際情況下就是驗證通過,這次請求成功,否則這次請求無效)
1、數據庫里面建立一個用戶表,用於存儲用戶登錄的賬號和密碼,用於用戶登錄測試
2、后台生成token的代碼類JavaWebToken(網上可以查到)
1 import io.jsonwebtoken.Jwts; 2 import io.jsonwebtoken.SignatureAlgorithm; 3 import org.slf4j.Logger; 4 import org.slf4j.LoggerFactory; 5 6 import javax.crypto.spec.SecretKeySpec; 7 import javax.xml.bind.DatatypeConverter; 8 import java.security.Key; 9 import java.util.Map; 10 11 public class JavaWebToken { 12 private static Logger log = LoggerFactory.getLogger(JavaWebToken.class); 13 14 //該方法使用HS256算法和Secret:bankgl生成signKey 15 private static Key getKeyInstance() { 16 //We will sign our JavaWebToken with our ApiKey secret 17 SignatureAlgorithm signatureAlgorithm = SignatureAlgorithm.HS256; 18 byte[] apiKeySecretBytes = DatatypeConverter.parseBase64Binary("bankgl"); 19 Key signingKey = new SecretKeySpec(apiKeySecretBytes, signatureAlgorithm.getJcaName()); 20 return signingKey; 21 } 22 23 //使用HS256簽名算法和生成的signingKey最終的Token,claims中是有效載荷 24 public static String createJavaWebToken(Map<String, Object> claims) { 25 return Jwts.builder().setClaims(claims).signWith(SignatureAlgorithm.HS256, getKeyInstance()).compact(); 26 } 27 28 //解析Token,同時也能驗證Token,當驗證失敗返回null 29 public static Map<String, Object> parserJavaWebToken(String jwt) { 30 try { 31 Map<String, Object> jwtClaims = 32 Jwts.parser().setSigningKey(getKeyInstance()).parseClaimsJws(jwt).getBody(); 33 return jwtClaims; 34 } catch (Exception e) { 35 log.error("json web token verify failed"); 36 return null; 37 } 38 } 39 }
使用前需要導入依賴包,在項目的pom.xml文件中加入:
<dependency> <groupId>io.jsonwebtoken</groupId> <artifactId>jjwt</artifactId> <version>0.7.0</version> </dependency>
測試的控制層代碼:
/** * 登錄驗證 login * @param rc 前端請求類(包含前端用戶輸入的賬號和密碼) * @param response * @return LoginInfo 用戶信息類(包含用戶的ID,賬號和密碼和生成token字符串信息) */ @RequestMapping(value = "/login") public LoginInfo login(RequestClass rc, HttpServletResponse response){ response.setHeader("Access-Control-Allow-Origin","*"); UserInf userInf = ls.uerLogin(rc.getUserName(),rc.getPassWord()); //根據前端傳送過來的賬號和密碼進行驗證 if( userInf == null) //用戶不存在,返回null return null; LoginInfo loginInfo = new LoginInfo(); Map<String,Object> m = new HashMap<String,Object>(); m.put("userId",userInf.getId()); String token = JavaWebToken.createJavaWebToken(m); // 根據存在用戶的id生成token字符串 loginInfo.setUserInf(userInf); loginInfo.setToken(token); //存在對象中並返回給前端 return loginInfo; } /** * token驗證方法 * @param rc * @param response * @return */ @RequestMapping(value = "/tokenConfirm") public LoginInfo tokenConfirm(RequestClass rc,HttpServletResponse response){ response.setHeader("Access-Control-Allow-Origin","*"); LoginInfo loginInfo = new LoginInfo(); System.out.println(rc.getToken()); if (JavaWebToken.parserJavaWebToken(rc.getToken()) != null){ //根據前端帶回來的token驗證 loginInfo.setTokenMark("true"); //驗證通過 }else{ loginInfo.setTokenMark("false"); //驗證失敗 } return loginInfo; }
3、前台測試頁面如下:
前端代碼:
<template> <div > <h1>{{ title }}</h1> <div> <span>賬號</span> <input type="text" name="username" v-model = "username"> </div> <div> <span>密碼</span> <input type="password" name="password" v-model = "password"> </div> <div> <button @click = "loginConfirm">登錄</button> <button @click = "tokenConfirm">訪問后台</button> </div> </div> </template> <script> import {setCookie,getCookie} from '../common/Cookie.js' export default{ data(){ return{ title:'登錄測試頁面!!!', username:'', password:'' } }, methods:{ loginConfirm(){ console.log('username:'+this.username+" password:"+this.password); var _this = this; this.axios.get('http://localhost:8080/login', { params: { userName: _this.username, passWord:_this.password } }) .then(function(response){ var obj = response.data; console.log(obj.token); setCookie(obj.token); }) .catch(function (error) { console.log(error); }); }, tokenConfirm(token){ var _this = this; var _token = getCookie(token); this.axios.get('http://localhost:8080/tokenConfirm',{ params:{ token:_token } }) .then(function(response){ var obj = response.data; console.log(obj); }) .catch(function(){ console.log(error); }); } }, mounted(){ } } </script> <style scoped> h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>
其中,引用的Cookie.js:
function setCookie(token){ document.cookie = token; } function getCookie(){ return document.cookie; } export {setCookie,getCookie}
4、開始測試,在頁面輸入用戶的賬號密碼,點擊登錄按鈕
后台驗證成功,在頁面控制台輸出可以看到后台返回的token
再點擊訪問后台請求的按鈕,后台驗證這個token並返回結果為true
假設我們這里改變了這個token,並發送給后台,則后台對token驗證失敗會返回false
點擊訪問后台按鈕
到此,簡單的token使用驗證