老九的程序进阶之路

第四期

公众号同步

HTTP的请求方法OPTIONS能干什么？

OPTIONS方法是用于请求获得由Request-URI标识的资源在请求/响应的通信过程中可以使用的功能选项。

简而言之，就是预检，获取服务器支持的HTTP请求方法；

经常在跨域访问的时候出现，用来检查服务器的性能，用以判断实际发送的请求是否安全。

前端鉴权是怎么实现的？

  1. Token验证，目前是最流行的一种鉴权方式，他的大致流程：

    • 客户端使用用户名跟密码请求登录
    • 服务端收到请求，去验证用户名与密码
    • 验证成功后，服务端会签发一个 Token，再把这个 Token 发送给客户端
    • 客户端收到 Token 以后可以把它存储起来，比如放在 Cookie 里或者 Local Storage 里
    • 客户端每次向服务端请求资源的时候需要带着服务端签发的 Token
    • 服务端收到请求，然后去验证客户端请求里面带着的 Token，如果验证成功，就向客户端返回请求的数据。

  2. session-cookie

    首次访问，服务端会生成session来返回客户端，客户端用cookie保存，浏览器会在下次访问的时候带上seesion。

  3. OAuth(开放授权)

    利用第三方登录，比如微信、QQ等等，对用户来说，减轻了用来记忆账号密码的复杂性，对产品来说，提高了用户的体验度，而且还能获得更多用户。

  4. HTTP Basic Authentication
    这种方式很少见，但举个简单的例子，你就可能会明白，当我们在浏览器首次登录的时候，浏览器会弹出一个窗口来确定是否保存账号和密码。
    认证过程：

    1. 客户端向服务器请求数据，请求的内容可能是一个网页或者是一个ajax异步请求；
    2. 服务器向客户端发送验证请求代码401；
    3. 当符合http1.0或1.1规范的客户端（如IE，FIREFOX）收到401返回值时，将自动弹出一个登录窗口，要求用户输入用户名和密码。
    4. 用户输入用户名和密码后，将用户名及密码以BASE64加密方式加密，并将密文放入前一条请求信息中。
    5. 服务器收到上述请求信息后，将Authorization字段后的用户信息取出、解密，将解密后的用户名及密码与用户数据库进行比较验证，如用户名及密码正确，服务器则根据请求，将所请求资源发送给客户端。

BloB对象是什么？常用在什么地方？

Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。

Blob一般用于存储文件，视频、音频等大文件之类的操作都会用到Blob；无论是分片上传或是下载大文件，都可以使用blob对象来优化。

Blob 存储用于：
直接向浏览器提供图像或文档。
存储文件以供分布式访问。
对视频和音频进行流式处理。
向日志文件进行写入。
存储用于备份和还原、灾难恢复及存档的数据。
存储数据以供本地或 Azure 托管服务执行分析
前端劝退师，公众号：前端劝退师 「全栈之路」Web前端开发的后端指南

用vue脚手架搭建的后台管理系统中，权限验证的方式总共有几种？逻辑是什么？

一般情况权限管理的控制有两种方式，一种是服务端传权限标识，比如我要在页面显示哪些路由，隐藏那些。一般情况下我们会在meta中设置路由标识，然后在路由拦截中动态生成可显示的路由表。另一种情况就是服务端返回路由表；路由表是由服务端控制。

Ajax编程步骤和 XMLHttpRequest 对象有哪些属性？

编程步骤：

  1. 创建XMLHttpRequest对象；

    //第一步：创建XMLHttpRequest对象
var xmlHttp;
if (window.XMLHttpRequest) {            //非IE
    xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {       //IE
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")
}

  2. 设置请求方式

    //第二步：设置和服务器端交互的相应参数，向路径http://localhost:8080/JsLearning3/getAjax准备发送数据
      
var url = "http://localhost:8080/JsLearning3/getAjax";
xmlHttp.open("POST", url, true);

  3. 调用回调函数

      //第三步：注册回调函数
  xmlHttp.onreadystatechange = function() {
      if (xmlHttp.readyState == 4) {
          if (xmlHttp.status == 200) {
              var obj = document.getElementById(id);
              obj.innerHTML = xmlHttp.responseText;
          } else {
              alert("AJAX服务器返回错误！");
          }
      }
  }

  4. 发送请求

    //第四步：设置发送请求的内容和发送报送。然后发送请求

var params = "userName=" + document.getElementsByName("userName")[0].value + "&userPass=" + document.getElementsByName("userPass")[0].value + "&time=" + Math.random();         // 增加time随机参数，防止读取缓存         
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=UTF-8");                     // 向请求添加 HTTP 头，POST如果有数据一定加加！！！！
xmlHttp.send(params);

readyState表示AJAX状态值；值为4时，表示响应内容解析完成，可以在客户端调用了。 status表示AJAX的状态码；值为200的时候，表示服务器返回成功。

XMLHttpRequest 对象：

除了上述的状态值和状态码，其他的属性还有： responseText：服务器接收到的响应体（不包括头部），或者如果还没有接收到数据的话，就是空字符串。如果 readyState 为 4，这个属性保存了完整的响应体。 responseXML：对请求的响应，解析为 XML 并作为 Document 对象返回。

事件有： onreadystatechange：readyState 属性改变的时候调用的事件。

方法有： abort()：取消当前响应，关闭连接并且结束任何未决的网络活动。 getAllResponseHeaders()：把 HTTP 响应头部作为未解析的字符串返回。 getResponseHeader()：返回指定的 HTTP 响应头部的值。其参数是要返回的 HTTP 响应头部的名称。可以使用任何大小写来制定这个头部名字，和响应头部的比较是不区分大小写的。 open()：初始化 HTTP 请求参数，例如 URL 和 HTTP 方法，但是并不发送请求。 send()：发送 HTTP 请求，使用传递给 open() 方法的参数，以及传递给该方法的可选请求体。 setRequestHeader()：向一个打开但未发送的请求设置或添加一个 HTTP 请求。

← 第五期 →