token簡單的使用


這里對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使用驗證


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM