Angularjs通过aspnetwebapi认证登录.docx

{{message}}

-->

Home.html登录进去的首页

。

。

。

。

。

。

认证流程

angularjs代码

var app =angular.module（"app",['ngRoute']）;

app.config（function（$routeProvider） {

$routeProvider.when（'/login', {

templateUrl:

 'templates/login.html',

controller:

'LoginController'

}）;

$routeProvider.when（'/home', {

templateUrl:

 'templates/home.html',

controller:

'HomeController'

}）;

$routeProvider.otherwise（{redirectTo:

'/login'}）;

}）;

定义route，默认显示login登录界面

app.factory（"SessionService", function （） {

return {

get:

 function （key） {

return sessionStorage.getItem（key）;

},

set:

 function （key, val） {

return sessionStorage.setItem（key, val）;

},

unset:

 function （key） {

return sessionStorage.removeItem（key）;

}

}

}）;

保存登录session,

app.factory（"AuthenticationService", function （$http, $location, SessionService, MessageService） {

var cacheSession = function （） {

SessionService.set（'authenicated',true）;

};

var uncacheSession = function （） {

SessionService.unset（'authenicated'）;

};

var loginError = function （response） {

MessageService.show（response.Message）;

};

return {

login:

 function （credentials） {

//if（credentials.UserName!

=="admin"||

//credentials.Password!

=="admin"）{

//alert（"Usernamemustbe'admin/admin'"）;

//}

//else{

//$location.path（'/home'）;

//}

//return$http.post（"/api/Login",credentials）

var login = $http.post（"/api/Login", credentials）;

login.success（cacheSession）;

login.success（MessageService.clean）;

login.error（loginError）;

return login;

},

logout:

function（）{

//$location.path（'/login'）;

//return$http.get（"/api/Login"）;

var logout = $http.get（"/api/Login"）;

logout.success（uncacheSession）;

return logout;

},

isLoggedIn:

 function （） {

return SessionService.get（'authenicated'）;

}

};

}）;

与后台webapi交互认证用户名/密码服务

app.controller（"LoginController", function （$scope, $location,$http, AuthenticationService） {

$scope.credentials = { UserName:

 "", Password:

 "", RememberMe:

false};

$scope.login = function （） {

AuthenticationService.login（$scope.credentials）.success（function （） {

$location.path（"/home"）;

}）;

}

}）;

Login方法登录成功重定向home页面

为了防止用户直接在地址栏输入/home跳过登录界面

app.run（function （$rootScope, $location, AuthenticationService, MessageService） {

var routesThatRequireAuth = ['/home'];

$rootScope.$on（'$routeChangeStart', function （event,next,current） {

if（_（routesThatRequireAuth）.contains（$location.path（）） &&

!

AuthenticationService.isLoggedIn（）） {

MessageService.show（"Pleaselogin"）;

$location.path（'/login'）;

}

}）;

}）;

必须登录过才能访问/home页面

Homecontroller代码

app.controller（"HomeController", function （$scope, $location, $http, AuthenticationService） {

$scope.credentials = { UserName:

 "", Password:

 "", RememberMe:

 false };

$scope.logout = function （） {

AuthenticationService.logout（）.success（function （） {

$location.path（"/login"）;

}）;

};

$scope.getvalue = function （） {

var url = "/api/values";

$http.get（url）.success（function （data） {

console.log（data）;

}）

.error（function （data） {

console.log（data）;

}）;

};

//$scope.getvalue（）;

$scope.expiry = function （） {

var url = "/api/values";

$http.post（url）.success（function （data） {

console.log（data）;

}）

.error（function （data） {

console.log（data）;

}）;

};

//$scope.expiry（）;

}）;

ValuesControllerAuthroize属性，必须认证通过才能访问

[Authorize]

public class ValuesController :

 ApiController

{

//GETapi/

//[Authorize]

public IEnumerable Get（）

{

return new string[]{ "value1", "value2" };

}

Homecontroller中可以logout登出，和getvalue获取需要认证的webapi。

如果用户长时间在home页面服务器端session过期后在调用getvalue方法会访问401错误。

这是如果捕获到401错误，那么就要重定向到/login页面

下面的代码就是用捕获401错误

app.config（function （$httpProvider） {

var LogOutUserOn401 = function （$location, $q, SessionService, MessageService） {

var success = function （response） {

//alert（"success"+response.status）;

return response;

};

var error = function （response） {

//alert（"error:

"+response.status）;

if （response.status === 401） {

SessionService.unset（'authenicated'）;

MessageService.show（response.Message）;

$location.path（'/login'）;

return $q.reject（response）;

} else {

return $q.reject（response）;

}

};

return function （promise） {

return promise.then（success, error）;

};

};

$httpProvider.responseInterceptors.push（LogOutUserOn401）;

}）;

注意：

默认情况下mvc如果认证过期返回的302重定向到mvc提供的登录界面而不是返回401错误代码，就需要修改Startup.Auth.cs

public void ConfigureAuth（IAppBuilder app）

{

//Enabletheapplicationtouseacookietostoreinformationforthesignedinuser

//app.UseCookieAuthentication（newCookieAuthenticationOptions

//{

//AuthenticationType=DefaultAuthenticationTypes.ApplicationCookie,

//LoginPath=newPathString（"/Account/Login"）

//}）;

app.UseCookieAuthentication（new CookieAuthenticationOptions（）

）;

功能演示

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

下载	加入VIP,免费下载

还剩页未读，继续阅读

举报
版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载

配套讲稿：

如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

特殊限制：

部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。

关 键  词：

Angularjs 通过 aspnetwebapi 认证 登录

  冰豆网所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。