zoukankan      html  css  js  c++  java
  • 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使用验证

  • 相关阅读:
    如何在Odoo创建新数据的时候添加自己的方法
    如何在odoo中实现隐藏原有菜单meum(3行代码实现)
    博客皮肤
    通过备份 Etcd 来完美恢复 Kubernetes 中的误删数据
    修改kubernetes-dashboard默认token认证时间
    Docker就该这么学--第一个dockerfile镜像文件
    nginx优化之网络服务模型
    nginx优化之nginx的进程与线程
    php的加载方式和设计模式
    nginx优化之nginx的配置文件详解
  • 原文地址:https://www.cnblogs.com/tt-ff/p/11736536.html
Copyright © 2011-2022 走看看