使用rest-framework-jwt进行身份认证 - 转

原文地址：https://www.jianshu.com/p/02b8350f35c8

python 及 前端配置 ：https://earthchen.cn/2017/06/15/django_rest_framework_jwt/

 验证方式：

http POST http://erp.nz-soft.com/api/auth/ username=用户名 password=密码

每次获取的token值不同

 

登陆及访问代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="style.css" />
	</head>

	<body>

		<div id="app">
			<div class="container">
				<span id="message">{{ msg }}</span>
			</div>
			<div class="container">
				<div class="account-info">
					<span v-if="userName">{{ userName }} | <a href="#" @click="logout">注销</a></span>
				</div>
			</div>
			<div class="container">
					<div class="form-group">
						
						<label>用户名</label>
						<input type="text" v-model="loginModel.username" placeholder="用户名" />
					</div>
					<div class="form-group">
						<label>密码</label>
						<input type="text" v-model="loginModel.password" placeholder="密码" />
					</div>
					<div class="form-group">
						<label></label>
						<button @click="login">登录</button>
					</div>
			</div>
			<div class="splitter"></div>
			<div class="container">
				<div class="form-group">
					<label></label>
					<button @click="callApi">调用API</button>
				</div>
				<div class="result">
					API调用结果：{{ result | json }}
				</div>
			</div>
		</div>

	</body>
	<script src="js/vue.js"></script>
	<script src="js/zepto.js"></script>

	<script>
		var demo = new Vue({
			el: '#app',
			data: {
			
			   loginUrl: 'http://erp.nz-soft.com/api/auth/',
			

			  //  loginUrl: 'http://erp.nz-soft.com/survey/authlogin/',
				logoutUrl: 'http://erp.nz-soft.com/api/auth/',
				apiUrl: 'http://erp.nz-soft.com/api/survey',
				loginModel: {
					username: '',
					password: '',
					grant_type: 'password',
		
				},
				msg: '',
				userName: '',
				result: ''
			},

			ready: function() {
				this.userName = sessionStorage.getItem('userName')
			},
			methods: {
				login: function() {
					var vm = this
						vm.msg = ''
						vm.result = ''
					
					$.ajax({
						url: vm.loginUrl,
						type: 'POST',
						dataType: 'json',
						data: vm.loginModel,
						xhrFields: {
     							 withCredentials: true
  						 },
						success: function(data) {
							vm.msg = '登录成功！'
							vm.userName = data.userName
							sessionStorage.setItem('accessToken', data.token)
							sessionStorage.setItem('userName', vm.userName)
					//		vm.msg = sessionStorage.getItem('accessToken')
						},
						error: vm.requestError
					})
				},
				logout: function() {
					var vm = this
						vm.msg = ''
						vm.result = ''
						
					$.ajax({
			
						url: vm.logoutUrl,
						type: 'POST',
						dataType: 'json',
						success: function(data) {
							
							vm.msg = '注销成功！'
							vm.userName = ''
							vm.loginModel.username = ''
							vm.loginModel.password = ''
							
							sessionStorage.removeItem('userName')
							sessionStorage.removeItem('accessToken')
						},
						error: vm.requestError
					})
				},
				callApi: function() {
					var vm = this
						vm.msg = ''
						vm.result = ''
			
					//注意：jwt后面有个空格 ,jwt 是配合 django 的 rest_framework_jwt
      			
						headers = {}
						headers.Authorization = 'JWT ' + sessionStorage.getItem('accessToken')

					$.ajax({
						type: 'get',
						dataTye: 'json',
						url: vm.apiUrl,
						headers: headers,
						success: function(data) {
							vm.result = data
						},
						error: vm.requestError
					})
				},
				requestError: function(xhr, errorType, error) {
					this.msg = xhr.responseText
				}
			}
		})



		
	</script>

</html>

　　

posted on 2018-04-13 12:25  筱箃  阅读(224)  评论(0)    收藏  举报

导航