登录安全认证-JWT(Json Web Token)



1.首先,前端通过Web表单将自己的用户名和密码发送到后端的接口。这一过程一般是一个HTTP POST请求。
建议的方式是通过SSL加密的传输(https协议),从而避免敏感信息被嗅探。

2.后端核对用户名和密码成功后,将用户的id等其他信息作为JWT Payload(负载),将其与头部分别进行
Base64编码拼接后签名,形成一个JWT。形成的JWT就是一个形同lll.zzz.xxx的字符串。

3.后端将JWT字符串作为登录成功的返回结果返回给前端。前端可以将返回的结果保存在localStorage
或sessionStorage上,退出登录时前端删除保存的JWT即可。 

4.前端在每次请求时将JWT放入HTTP Header中的Authorization位。(解决XSS和XSRF问题)

5.后端检查是否存在,如存在验证JWT的有效性。例如,检查签名是否正确;检查Token是否过期;
检查Token的接收方是否是自己(可选)。

6.验证通过后后端使用JWT中包含的用户信息进行其他逻辑操作,返回相应结果。


2018-05-03 09:50 浏览(22) 留言(0)

redux理解流程图

看图


2018-04-26 10:06 浏览(19) 留言(0)

react 理解生命周期图

看图


2018-04-26 10:05 浏览(17) 留言(0)

js看图理解原型

看图

2018-04-26 10:04 浏览(11) 留言(0)

原生js-二维数组-表格展示-列最大值突显

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>原生js-二维数组-表格展示=列max突显</title>
</head>
<style>
  body{
    text-align: center;
  }
  .box{
    margin: 0 auto;
    display: inline-block;
  }
  table{
    text-align: center;
    border: 1px solid #aaa;
    border-collapse:collapse;
  }
  td{
    border: 1px solid #ccc;
    padding: 0.6em;
    width: 1.4em;
    height: 1.4em;
  }
  .colMax{
    background: #edf;
  }
</style>
<body>
  <h1>table展示</h1>
  <pre>
    [[1,2,33,5], [2,10,15,16], [3,1,21,20]]

返回HTML,表格渲染 列最大值突出显示 不能使用函数库

</pre> <div class="box"></div> <script> var arr = [[1, 2, 33 ,5], [2, 10, 15, 16], [3, 1, 21, 20]], len = arr.length, len1, str = "<table>"; for (var i = 0; i < len; i++) { // 行遍历 len1 = arr[i].length; str += "<tr>"; for (var j = 0; j < len1; j++) { var colM,cla='',max = 0; // 在列遍历这里定义这三个变量很重要 for (var k = 0; k < len; k++) { if (max < arr[k][j]) { max = arr[k][j]; colM = k; } } if (arr[i][j] === max) { cla = 'colMax'; console.log(colM,j,max) } str += "<td class='" + cla + "'>" + arr[i][j] + "</td>"; } str += "</tr>"; } str += "</table>"; document.getElementsByClassName('box')[0].innerHTML = str; </script> </body> </html>

在线查看

2018-03-10 05:14 浏览(28) 留言(0)

jq-同页面-多下拉选择-选值不重复

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jq-同页面-多下拉选择-选值不重复</title>
  <style>
    body{
      text-align: center;
      font-size: 1.2em;
    }
    .box{
      margin: 0 auto;
    }
    select{
      margin: 30px 10px;
      font-size: 1em;
    }
  </style>
</head>
<body>
  <div class="box">
    <select class="sl sl1">
      <option class="default" disabled selected value="">请选择</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
    </select>
    <select class="sl sl2">
      <option class="default" disabled selected value="">请选择</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
    </select>
    <select class="sl sl3">
      <option class="default" disabled selected value="">请选择</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
    </select>
  </div>

<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <script> $(function(){ $('body').on('change', '.sl', function(event) { event.preventDefault(); / Act on the event / var oldV = $(this).attr('old'); var curV = $(this).val(); if (oldV) { $(this).siblings('.sl').find('option[value='+oldV+']').show(); } $(this).siblings('.sl').find('option[value='+curV+']').hide() $(this).attr('old',curV) }) }) </script> </body> </html>

在线查看

2018-03-10 05:07 浏览(18) 留言(0)

vue-同页面-多下拉选择-选值不重复

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue-同页面-多下拉选择-选值不重复</title>
  <style>
    #app{
      text-align: center;
      font-size: 1.2em;
    }
    select{
      margin: 30px 10px;
      font-size: 1em;
    }
  </style>
</head>
<body>
  <div id="app">
    <select v-model="select1">
      <option selected disable value="请选择">请选择</option>
      <option v-for="x of 10" :key="x" v-if="x == select1 || !selected.includes(x.toString())">{{x}}</option>
    </select>
    <select v-model="select2">
      <option selected disable value="请选择">请选择</option>
      <option v-for="x of 10" :key="x" v-if="x == select2 || !selected.includes(x.toString())">{{x}}</option>
    </select>
    <select v-model="select3">
      <option selected disable value="请选择">请选择</option>
      <option v-for="x of 10" :key="x" v-if="x == select3 || !selected.includes(x.toString())">{{x}}</option>
    </select>
    <p>{{selected}}</p>
  </div>
<script src="https://cdn.bootcss.com/vue/2.5.12/vue.min.js"></script>
<script>
var app = new Vue({
  el: '#app',
  data: {
      select1: '请选择',
      select2: '请选择',
      select3: '请选择'
  },
  computed: {
    selected () {
      return [this.select1, this.select2, this.select3]
    }
  }
})
</script>
</body>
</html>

在线查看


2018-03-10 04:57 浏览(15) 留言(0)

Date---getBJDate

Date.prototype.getBJDate = function () { //获得当前运行环境时间 var d = new Date(), currentDate = new Date(), tmpHours = currentDate.getHours(); //时区 var time_zone = -d.getTimezoneOffset() / 60; //少于0的是西区 西区应该用时区绝对值加京八区 重新设置时间(西区时间比东区时间早 所以加时区间隔) if (time_zone < 0) { time_zone = Math.abs(time_zone) + 8; currentDate.setHours(tmpHours + time_zone); } else { //大于0的是东区 东区时间直接跟京八区相减 time_zone -= 8; currentDate.setHours(tmpHours - time_zone); } return currentDate; }

2017-11-30 03:35 浏览(129) 留言(4)

js 深拷贝

var json1 = {
    "name": "哈哈",
    "age": 18,
    "arr1": [1, 2, 3, 4, 5],
    "string": 'afasfsafa',
    "arr2": [1, 2, 3, 4, 5],
    "arr3": [
        { "name1": "嘿嘿" },
        { "job": "前端开发求职" }
    ]
};
var json2 = {};

function copy(obj1, obj2) {
  var obj2 = obj2 || {}; //最初的时候给它一个初始值=它自己或者是一个json
  for (var name in obj1) {
    if (typeof obj1[name] === "object") { //先判断一下obj[name]是不是一个对象
      obj2[name] = (obj1[name].constructor === Array) ? [] : {}; //我们让要复制的对象的name项=数组或者是json
      copy(obj1[name], obj2[name]); //然后来无限调用函数自己 递归思想
    } else {
      obj2[name] = obj1[name]; //如果不是对象,直接等于即可,不会发生引用。
    }
  }
  return obj2; //然后在把复制好的对象给return出去
}
json2 = copy(json1, json2) json1.arr1.push(6);
alert(json1.arr1); //123456
alert(json2.arr1); //12345
2017-09-15 08:34 浏览(214) 留言(0)

php获取网络时间

<?php header("content-type:text/html;charset=utf-8"); error_reporting( E_ALL&~E_NOTICE ); // $fp=fsockopen('time.nist.gov',13,$errno,$errstr,90);
// echo fread($fp,date('Y')).'---1
'; $str = file_get_contents('http://gb.weather.gov.hk/cgi-bin/hko/localtime.pl'); //2017 8 24 16 49 6 $arr = explode("\n", trim($str)); $arr = array_filter($arr); // 删除空元素
print_r($arr); $unix_t = mktime($arr[3],$arr[4],$arr[5],$arr[1],$arr[2],$arr[0]); $final_t = date('Y-m-d h:i:s',$unix_t); echo $final_t; ?>

2017-09-14 07:53 浏览(192) 留言(0)

使用@media实现IE hack的方法

仅IE6和IE7识别   @media screen\9 { .selector { property: value; } } 仅IE6和IE7、IE8识别   @media \0screen\,screen\9 { .selector { property: value; } } 仅IE8识别   @media \0screen { .selector { property: value; } } 仅IE8-10识别   @media screen\0 { .selector { property: value; } } 仅IE9和IE10识别   @media screen and (min-width:0\0) { .selector { property: value; } } 仅IE10识别   @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* IE10-spe   仅支持谷歌 @media screen and (-webkit-min-device-pixel-ratio:0) { .footer .layout-help { padding-bottom:357px; } } 

2017-09-14 01:35 浏览(195) 留言(0)