Vue結合Django-Rest-Frameword結合實現登入認證（一）
阿新 • • 發佈：2020-09-21
>作者：小土豆biubiubiu
>
>部落格園：https://www.cnblogs.com/HouJiao/
>
>掘金：https://juejin.im/user/2436173500265335
>
>
>微信公眾號：土豆媽的碎碎念（掃碼關注，一起吸貓，一起聽故事，一起學習前端技術）
>
>作者文章的內容均來源於自己的實踐，如果覺得有幫助到你的話，可以點贊❤️給個鼓勵或留下寶貴意見
# 前言
最近需要做一個`登入認證`的功能，所以想將整個的過程做一個記錄，方便以後回頭檢視，同時希望給我遇到同樣問題的同學一些參考。
> 因為認證是後端的功能，所以我這個不專業的前端在實現這個功能的時候不會深究太多。所以在記錄的過程中沒有過多的原理，著重記錄實現過程和這個過程中遇到的問題以及解決方案。
> 如果對登入這塊前後端流程原理不太懂的，可以先做一點功課，或者直接看我的整個操作和結果，看完之後會從結果和現象出發，在去理解學習登入認證原理就會更容易。
# 初始的環境介紹
### 前端框架
框架：`Vue`
HTTP庫：`axios`
### 後端專案
後端框架：基於`python`的`django`框架
WEB API：`rest-framework`
伺服器: `centos`
資料庫：`PostgreSQL`
python版本：`2.7.5`
django版本：`1.10.1`
### 關於後端資料庫的一些說明
資料庫使用的是`PostgreSQL`，並且已經對資料庫表進行了同步，命令為：`python manage.py migrate`。
資料庫進行同步以後，會生成`10`相關的資料表。
需要關注的就是`auth_user`表這個表，它是`django`框架生成的使用者表，後面就使用這個表儲存使用者的資訊。
我們檢視一下這個表結構。
表裡面暫時沒有什麼資料。
接著我們來建立一個使用者，用於後期的登入測試：`python manage.py createsuperuser`
使用者建立成功，此時在去查詢資料表，就有一條使用者資訊了。
接下來就是登入驗證的實現了。
# 後端Django專案配置
### Django登入認證配置
首先我們需要在`setting.py`檔案的`INSTALLED_APPS`配置登入認證的`APP`。
```python
INSTALLED_APPS = [
...
'rest_framework.authtoken'
]
```
### 設定全域性的認證方案
接著在`setting.py`中配置全域性身份認證方案。
```python
# 設定全域性身份認證方案
REST_FRAMEWORK = {
'DEFAULT_AUTHENTICATION_CLASSES': (
'rest_framework.authentication.TokenAuthentication', # token認證
)
}
```
### 資料庫同步
上面的配置完成需要進行資料庫同步：`python manage.py migrate`
在此檢視資料庫：
發現會多出來一個名為`authtoken_token`的資料表，這個表就是和使用者認證相關的資料表。
### 簡單測試
我們已經配置好了全域性的認證方式，那按道理來說，現在任意訪問後端的某個`API`就會出現為`HTTP 401未經授權`這樣的錯誤，那我們來試一試。
那結果發現請求還是可以正常發出。
這塊在網上搜索了很久，看到有網友說關於`setting`設定的`全域性身份認證方案`配置有問題,正確的配置是
```javascript
# 設定全域性身份認證方案
REST_FRAMEWORK = {
'DEFAULT_PERMISSION_CLASSES': (
'rest_framework.permissions.IsAuthenticated',
),
'DEFAULT_AUTHENTICATION_CLASSES': (
'rest_framework.authentication.TokenAuthentication', # token認證
)
}
```
`DEFAULT_PERMISSION_CLASSES`是關於使用者的許可權配置，如果沒有配置該項的話就是允許使用者無限制訪問，不管我們的請求是被認證或未認證的。
> 這塊可以看 [