使用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>
