前后端分離之權限驗證

前后端分離之權限驗證

原理：將登錄驗證的請求頭中后端生成的秘鑰（token）接收后存儲在cookie內，在再次請求數據時添加在請求頭中發送給后端驗證，請求數據。

代碼：

登錄ajax：

    $scope.aaa=function aaa() {
        $scope.uname = $(".inpu1").val();
        $scope.passwd = $(".inpu2").val();
        $scope.aaaa={"uname":$scope.uname,"passwd":$scope.passwd};/*獲取用戶名密碼*/
        $.ajax({
            crossDomain:true,
            type:'POST',
            url:'http://192.168.1.10:8080/demo/tokens ',
            dataType:'json',
            contentType:'application/json',
            data:JSON.stringify( $scope.aaaa) ,
            complete: function(resp){
                var cookss = resp.getResponseHeader('Authorization'));/*獲取后端傳過來的token*/
                $.cookie("cookaa",cookss,{expires:0.01});/*將token轉存在cookie中*/
            },
            success: function(data){
                window.location.href="#/strat";
            },
            error:function () {
                alert(2);
            }.bind(this)
        });
    };

數據請求：

$.ajax({
    withCredentials:true,
    crossDomain:true,
    type:'GET',
    url:'http://192.168.1.10:8080/demo/liveInfo/liveInfolist ',
    xhrFields: {
        withCredentials: true
    },/*在ajax跨域請求中攜帶cookie做身份驗證*/
    dataType:'json',
    contentType:'application/json',
    async: false,
    beforeSend: function(xhr) {
        xhr.setRequestHeader("X-Token",$.cookie("cookaa"));/*將token的值插入請求頭*/
    }.bind(this),
    success:function (data) {
        if(data.meta.success){
            $scope.data=data.data;
        }
    },
    error:function () {
    }.bind(this)
}) ;