判斷用戶是否登錄
效果圖
當用戶未登錄時,邏輯上是不允許訪問某些頁面的。比如用戶中心頁面。因此就需要對某些頁面做登錄驗證,而Django封裝了這個方法。
用戶中心前端頁面:
<h2>用戶中心</h2>
<div id="app" v-cloak>
<table>
<tr>
<td>當前登錄用戶:</td>
<td>{{ request.user.username }}</td>
<td><a href="/logout/">退出</a></td>
<td><a href="/info/">用戶中心</a></td>
</tr>
</table>
<h2>基本信息</h2>
<table>
<tr>
<th>用戶名</th>
<th>聯系方式</th>
<th>郵箱</th>
</tr>
<tr>
<td>[[ username ]]</td>
<td>[[ mobile ]]</td>
<td v-if="set_email">
<input v-model="email" @blur="check_email" type="email" name="email">
<input @click="save_email" type="button" value="保 存">
<input @click="cancel_email" type="reset" value="取 消">
<span v-show="error_email">郵箱格式錯誤</span>
</td>
<td v-else>
<input v-model="email" type="email" name="email" readonly>
<span v-if="email_active">已驗證</span>
<span v-else>待驗證</span>
<input @click="save_email" :disabled="send_email_btn_disabled" type="button"
:value="send_email_tip">
</td>
</tr>
</table>
</div>
對應於此頁面的VUE:
var vm = new Vue({
el:'#app',
delimiters:['[[', ']]'],
data:{
host:host,
username:username,
mobile:mobile,
email:email,
email_active:email_active,
set_email:false,
error_email:false,
error_email_message:'',
send_email_btn_disabled:false,
send_email_tip:'重新發送郵件',
},
mounted(){},
methods:{
// 檢查email格式
check_email(){
// 匹配正則
var re = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/;
if(re.test(this.email)){
this.error_email = false;
}
else{
this.error_email_message = '郵箱格式錯誤';
this.error_email = true;
return;
}
},
// 保存email
save_email(){
// 檢查email格式
this.check_email();
if(this.error_email == false){
var url = this.host + '/emails/';
axios.put(url, {
email:this.email
}, {
headers:{
'X-CSRFToken':getCookie('csrftoken')
},
responseType:'json'
}).then(response=>{
if(response.data.code == '0'){
this.set_email = false;
this.send_email_btn_disabled = true;
this.send_email_tip = '已發送驗證郵件';
}
else if(response.data.code == '4101'){
location.href = '/login/?next=/info/';
}
else{
this.error_email_message = response.data.errmsg;
this.error_email = true;
}
}).catch(error=>{
console.log(error.response)
});
}
},
// 取消保存email
cancel_email(){
this.email = '';
this.error_email = false;
},
}
});
從視圖函數接收變量:
let username = "{{ username }}";
let mobile = "{{ mobile }}";
let email = "{{ email }}";
let email_active = "{{ email_active }}";
工具js:
// 獲取cokie
function getCookie(name){
var r = document.cookie.match("\\b" + name + "=([^;]*)\\b");
return r ? r[1] : undefined;
}
視圖函數:
class UserInfoView(LoginRequiredMixin, View):
def get(self, request):
return render(request, 'user_center_info.html')
Django的LoginRequiredMixin類中封裝了驗證用戶登錄的代碼,可以直接使用。
原始代碼為:# 判斷是否登錄 if request.user.is_authenticated: # 已登錄 return render(request, 'user_center_info.html') else: # 未登錄 return redirect('/login/')
還需要在配置文件中指定被攔截之后重定向的頁面:
LOGIN_URL = '/login/'
登錄之后返回剛才瀏覽的頁面:
在VUE中有這樣一段代碼:
location.href = '/login/?next=/info/';
這里指定了登錄之后,重定向的頁面是“info”。
所以在登錄的視圖函數接收一下這個參數,重定向的頁面改一下就可以了。
# 接收重定向參數
next_url = request.GET.get('next', '/')
# 有兩個參數,如果有next這個參數,則返回next指定的頁面,若沒有,則返回“/”
...
response = redirect(next_url)
response.set_cookie('username', user.username, max_age=60 * 60 * 24 * 14)
return response