token简单的使用

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使用验证