angularjsxsrftoken_angularjs 在未登錄時如何攔截

⑴ android，io.jsonwebtoken：jjwt：0.7.0 怎麼使用到android

做了這么長時間的web開發，從Java EE中的jsf，spring，hibernate框架，到spring web MVC，到用PHP框架thinkPHP，到現在的nodejs，我自己版的看法是權越來越喜歡干凈整潔的web層，之前用jsf開發做view層的時候，用的primefaces做的界面顯示，雖然primefaces的確提供了很大的便利，可以讓開發人員專注於業務邏輯開發，這樣其實就省去了前端開發的工作。而後來發現有些客戶需要的展現形式很難實現，或者通過拼湊的方法實現的結果效率不高。使用不靈活，後來自己漸漸的轉向了做前端工程師。spring WEB MVC可以做到干凈整潔的web層，可以做到web層分離，通過ajax和服務端通信。現在在學習AngularJS框架，後台數據服務端打算用REST風格的介面來做，這個在前後台交互上就要考慮數據通信的安全問題，關於這個在關於SESSION的理解一文中其實有提到的。

⑵ unexpected token o in json at position 1 什麼意思

JSON報錯問題的解決

今天在項目中，有一個angularJS的頁面，使用$http請求後台返回JSON，結果報錯Unexpected token in JSON at position 650,控制台顯示的是angular內部JSON.parse時報錯的。這就定位到不是angular的問題，是返回的JSON字元串有問題。然後查看開發者工具中的network，找到返回的結果，拷貝出來，通過FE工具格式化JSON，這個工具沒有報錯，能夠正常轉換。

之後修改代碼，在$http添加transformResponse方法，並且把返回的結果綁定到window對象上。

$http({

url:link,

data:param,

transformResponse:function(rst){

window.rcdt=rst;

}

}).success(function(res){

//....

});

對代碼做了以上修改後，在chrome的控制台裡面通過

輸入window.rcdt列印出返回的字元串，看不出問題來，

然後通過，JSON.parse(window.rcdt),報錯Unexpected token in JSON at position 650。

之後，再在控制台輸入window.rcdt=window.rcdt.replace(/s+/,"")，將字元串中的空格去除。

這時候再輸入JSON.parse(window.rcdt)；JSON轉換正常，沒有報錯。

到這里，算是定位到問題，是JSON中包含了特殊字元。

之後又找到請求url對應的後台，發現後台返回的是一個jsp頁面，並且當初是我為了省事在jsp頁面中使用EL表達式拼接的JSON字元串。

[

<c:foreach items="${myList}" var="me" varStatus="st">

{"name":"${me.name}","age":"${me.age}","content":"${me.content}"}<c:if test="!st.last">,</c:if>

</c:foreach>

]

在JSP頁面中是這樣寫的，通過el表達式和JSTL標簽生成的JSON字元串。這種寫法本沒有錯誤，能夠正確返回JSON字元串的。

但是，問題就出在${me.conent}上，它的值是通過前台輸入保存的.

前台這樣輸入後，獲取的textarea中的value值裡面，包換了換行符「」。這個換行符在前台展示是可以的，瀏覽器不認它是換行，但是保存資料庫，並且後台沒有對換行符進行處理。所以最後獲取到的JSON字元串中也就包含了換行符。而JSON.parse報錯的原因就是因為換行符。

所以，要對conent中的換行符進行替換。

<% request.setAttribute("vv"," ");%>

[

<c:foreach items="${myList}" var="me" varStatus="st">

{"name":"${me.name}","age":"${me.age}","content":"${fn:replace(me.content,vv,'')}"}<c:if test="!st.last">,</c:if>

</c:foreach>

]

使用jstl的fn函數對content中的換行符進行替換。因為replace函數中直接填" "會報錯，所以使用request.setAttribute將「」設置為變數再使用，這樣就能正常替換了。

到這里，問題解決了，前台也能正常轉換成JSON了，不再報錯了。這個問題說起來簡單，但找問題的時候，花了兩個小時。所以記錄下來，也便於遇到同樣問題的人能夠快速解決問題。

另外，如果JSON.parse報錯為：Unexpected token o in JSON at position 1，那就很有可能不是JSON字元串的問題，而是你調用了兩次JSON.parse導致的。

或者對已經是JSON對象的對象調用JSON.parse也會報這個錯誤。

⑶ 「unexpected token o in json at position 1」是什麼意思

JSON報錯問題的解決

之後修改代碼，在$http添加transformResponse方法，並且把返回的結果綁定到window對象上。

$http({

url:link,

data:param,

transformResponse:function(rst){

window.rcdt=rst;

}

}).success(function(res){

//....

});

對代碼做了以上修改後，在chrome的控制台裡面通過

輸入window.rcdt列印出返回的字元串，看不出問題來，

然後通過，JSON.parse(window.rcdt),報錯Unexpected token in JSON at position 650。

之後，再在控制台輸入window.rcdt=window.rcdt.replace(/s+/,"")，將字元串中的空格去除。

這時候再輸入JSON.parse(window.rcdt)；JSON轉換正常，沒有報錯。

到這里，算是定位到問題，是JSON中包含了特殊字元。

之後又找到請求url對應的後台，發現後台返回的是一個jsp頁面，並且當初是我為了省事在jsp頁面中使用EL表達式拼接的JSON字元串。

[

<c:foreach items="${myList}" var="me" varStatus="st">

{"name":"${me.name}","age":"${me.age}","content":"${me.content}"}<c:if test="!st.last">,</c:if>

</c:foreach>

]

在JSP頁面中是這樣寫的，通過el表達式和JSTL標簽生成的JSON字元串。這種寫法本沒有錯誤，能夠正確返回JSON字元串的。

但是，問題就出在${me.conent}上，它的值是通過前台輸入保存的.

所以，要對conent中的換行符進行替換。

<% request.setAttribute("vv"," ");%>

[

<c:foreach items="${myList}" var="me" varStatus="st">

{"name":"${me.name}","age":"${me.age}","content":"${fn:replace(me.content,vv,'')}"}<c:if test="!st.last">,</c:if>

</c:foreach>

]

另外，如果JSON.parse報錯為：Unexpected token o in JSON at position 1，那就很有可能不是JSON字元串的問題，而是你調用了兩次JSON.parse導致的。

或者對已經是JSON對象的對象調用JSON.parse也會報這個錯誤。

⑷ angularjs 路由攔截器怎麼實現

代碼如下，下面的代碼實現了登陸校驗，你可以寫自己的攔截器

.config(function($stateProvider,$urlRouterProvider,$locationProvider,$httpProvider,$provide){
$urlRouterProvider
.otherwise('/');
$locationProvider.html5Mode(true);
$httpProvider.interceptors.push('authInterceptor');
})
.factory('authInterceptor',function($rootScope,$q,$cookies,$injector){
varstate;
return{
//
request:function(config){
config.headers=config.headers||{};
if($cookies.get('token')){
config.headers.Authorization='Bearer'+$cookies.get('token');
}
returnconfig;
},
//
responseError:function(response){
if(response.status===401){
(state||(state=$injector.get('$state'))).go('login');
//removeanystaletokens
$cookies.remove('token');
return$q.reject(response);
}
else{
return$q.reject(response);
}
}
};

})

⑸ angularjs 在未登錄時，如何攔截

http攔截，即$http服務允許我們與服務端交互，有時候我們希望在發出請求之前以及收到響應之後做些事情。
$httpProvider包含了一個interceptors的數組。

我們這樣創建一個interceptor。
app.factory('myInterceptor', ['$log', function($log){
$log.debug('');

var myInterceptor = {};

return myInterceptor;
}])

接著注冊interceptor.
app.config(['$httpProvider', function($httpProvider){
$httpProvider.interceptors.push('myInterceptor');
}])

以下是$http攔截的一些例子。

■ 攔截器中的非同步操作
app.factory('myInterceotpr','someAsyncServcie', function($q, someAsyncServcie){
var requestInterceptor = {
request: function(config){
var deferred = %q.defer();
someAsyncService.doAsyncOperation().then(function(){
...
deferred.resolve(config);
}, function(){
...
deferred.resolve(config);
})
return deferred.promise;
}
};

return requestInterceptor;
})

以上，是一個請求攔截，做了一個非同步操作，根據非同步操作的結果來更新config。

當然也有響應攔截。
app.factory('myInterceptor',['$q', 'someAsyncService', function($q, someAsyncSercice){
var responseInterceptor = {
response: function(response){
var deferred = $q.defer();
someAsyncService.doAsyncOperation().then(function(response){
...
deferred.resolve(response);
}, function(response){
...
deferred.resolve(response);
})
return deferred.promise;
}
};
return responseInterceptor;
}])

■ Session攔截，請求攔截

服務端有2種類型的驗證，一個是基於cookie的，一種是基於token的。對於基於token驗證，當用戶登錄，獲取一個來自服務端的token，這個token在每一次請求時發送給服務端。

創建一個有關session的injector:
app.factory('sessionInjector',['SessionService', function(SessionService){
var sessionInjector = {
request: function(config){
if(!SessionService.isAnonymous){
config.headers['x-session-token'] = SessionService.token;
}
return config;
}
};

return sessionInjector;
}])

可見，把從服務端返回的token放在了config.headers中。

注冊injector:

app.config(['$httpProvider', function($httpProvider){
$httpProvider.interceptors.push('sessionInjector');
}])

發出一個請求：

$http.get('');

攔截前大致是：

{
"transformRequest":[null],
"transformResponse":[null],
"method":"GET",
"url":"",
"headers":{
"Accept": "application/json, text/plain,*/*"
}
}

攔截後，在headers中多兩個一個x-session-token欄位:

{
"transformRequest":[null],
"transformResponse":[null],
"method":"GET",
"url":"",
"headers":{
"Accept": "application/json, text/plain,*/*",
"x-session-token":......
}
}

■ 時間戳，請求和響應攔截

app.factory('timestampMarker',[function(){
var timestampMarker = {
request:function(config){
config.requestTimestamp = new Date().getTime();
return config;
},
response: function(response){
response.config.responseTimestamp = new Date().getTime();
return config;
}
};

return timestampMarker;
}])

以上，在請求和響應時攔截，在config.requestTimestamp和config.responseTimestamp賦上當前的時間。

注冊攔截器：

app.config(['$httpProvider', function($httpProvider){
$httpProvider.interceptors.push('timestampMarker');
}])

然後在運用的時候可以算出請求響應所耗去的時間。

$http.get('').then(function(response){
var time = response.config.responseTime - response.config.requestTimestamp;
console.log('請求耗去的時間為 ' + time);
})

■ 請求錯誤恢復，請求攔截

模擬一個請求攔截的錯誤情形

app.factory('requestRejector',['$q', function($q){
var requestRejector = {
request: function(config){
return $q.reject('requestRejector');
}
};
return requestRejector;
}])

攔截請求錯誤：

app.factory('requestRecoverer',['$q', function($q){
var requestRecoverer = {
requestError: function(rejectReason){
if(rejectReason === 'requestRejector'){
//恢復請求
return {
transformRequest:[],
transformResponse:[],
method:'GET',
url:'',
headers:{
Accept:'application/json, text/plain, */*'
}
};
} else {
return $q.reject(rejectReason);
}
}
};

return requestRecoverer;
}])

注冊攔截器：

?

app.config(['$httpProvider', function($httpProvider){
$httpProvider.interceptors.push('requestRejector');
$httpProvider.interceptors.push('requestRecoverer');
}])

■ Session錯誤

app.factory('sessionRecoverer',['$q','$injector',function($q, $injector){
var sessionRecoverer = {
responseError: function(response){
//如果Session過期
if(response.status == 419){
var SessionService = $injector.get('SessionService');
var $http = $injector.get('$http');
var deferred = $q.defer();

//創建一個新的session
SessionService.login().then(deferred.resolve, deferred.reject);

return deferred.promise.then(function(){
reutrn $http(response.config);
})
}
return $q.reject(response);
}
};

return sessionRecoverer;
}])

⑹ angular httpClient訪問的請求的時候headers掛不上數據

解決angularjs中post參數獲取不到的問題的方法：
當使用angularjs發送告拆post請求時:
1 $http({
2 method : "post",
3 url : "./account/add",
4 data : {name:"123",passwd:123}
5 })

後台springMVC接受不到參數
public String add(@RequestParam String name, @RequestParam String passwd) {

}

因為angularjs發送post請求時啟兆參數列表類型是 Payload(可以通過chrome調試工襪旁棗具的network查看), 而後台想要接收參數的話, 參數列表的類型需為 Form data(用jquery發送post請求時就是該類型), 所以需要做如下調整
$http({
method : "post",
url : "./account/add",
data : $.param(params),
headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}
})

導航:首頁 > 編程語言 > angularjsxsrftoken

angularjsxsrftoken

與angularjsxsrftoken相關的資料

友情鏈接