在登陸元件中找到登陸按鈕，繫結點選事件

<button class="login_btn" @click="loginhander">登入</button>

在methods中請求後端

export default {
  name: 'Login',
  data(){
    return {
        login_type: 0,
        remember:false, // 記住密碼
        username:"",
        password:"",
    }
  },

  methods:{
    // 登入
    loginhander(){
      this.$axios.post("http://127.0.0.1:8000/users/authorizations/",{"username":this.username,"password":this.password}).then(response=>{
        console.log(response.data)
      }).catch(error=>{
        console.log(error)
      })
    }
  },

};
 

前端儲存jwt

可以將JWT儲存在cookie中，也可以儲存在瀏覽器的本地儲存裡，我們儲存在瀏覽器本地儲存中

瀏覽器的本地儲存提供了sessionStorage 和 localStorage 兩種，從屬於window物件：

• sessionStorage 瀏覽器關閉即失效
• localStorage 長期有效

使用方法

sessionStorage.變數名 = 變數值   // 儲存資料
sessionStorage.setItem("變數名","變數值") // 儲存資料
sessionStorage.變數名  // 讀取資料
sessionStorage.getItem("變數名") // 讀取資料
sessionStorage.removeItem("變數名") // 清除單個數據
sessionStorage.clear()  // 清除所有sessionStorage儲存的資料

localStorage.變數名 = 變數值   // 儲存資料
localStorage.setItem("變數名","變數值") // 儲存資料
localStorage.變數名  // 讀取資料
localStorage.getItem("變數名") // 讀取資料
localStorage.removeItem("變數名") // 清除單個數據
localStorage.clear()  // 清除所有sessionStorage儲存的資料
 

登陸元件程式碼Login.vue

	// 使用瀏覽器本地儲存儲存token
  if (this.remember) {
    // 記住登入
    sessionStorage.clear();
    localStorage.token = response.data.token;
  } else {
    // 未記住登入
    localStorage.clear();
    sessionStorage.token = response.data.token;
  }
	// 頁面跳轉回到上一個頁面 也可以使用 this.$router.push("/") 回到首頁
	this.$router.go(-1)
 

預設的返回值僅有token，我們還需在返回值中增加username和id，方便在客戶端頁面中顯示當前登陸使用者

通過修改該檢視的返回值可以完成我們的需求。

在user/utils.py 中，建立

def jwt_response_payload_handler(token, user=None, request=None):
    """
    自定義jwt認證成功返回資料
    """
    return {
        'token': token,
        'id': user.id,
        'username': user.username
    }

修改settings/dev.py配置檔案

# JWT
JWT_AUTH = {
    'JWT_EXPIRATION_DELTA': datetime.timedelta(days=1),
    'JWT_RESPONSE_PAYLOAD_HANDLER': 'users.utils.jwt_response_payload_handler',
}

登陸元件程式碼Login.vue

	// 使用瀏覽器本地儲存儲存token
  if (this.remember) {
    // 記住登入
    sessionStorage.clear();
    localStorage.token = response.data.token;
    localStorage.id = response.data.id;
    localStorage.username = response.data.username;
  } else {
    // 未記住登入
    localStorage.clear();
    sessionStorage.token = response.data.token;
    sessionStorage.id = response.data.id;
    sessionStorage.username = response.data.username;
  }
	//登入成功之後，提示使用者，然後使用者點選確定，就跳轉到首頁
	let ths = this;
  this.$alert('登入成功！','路飛學城',{  #element-ui的alert需要三個引數，提示資訊，標題，{callback回撥函式}
    callback(){
      ths.$router.push('/');  
    }
  })

多條件登入

JWT擴充套件的登入檢視，在收到使用者名稱與密碼時，也是呼叫Django的認證系統中提供的authenticate()來檢查使用者名稱與密碼是否正確。

可以通過修改Django認證系統的認證後端（主要是authenticate方法）來支援登入賬號既可以是使用者名稱也可以是手機號。

官方說：修改Django認證系統的認證後端需要繼承django.contrib.auth.backends.ModelBackend，並重寫authenticate方法。

authenticate(self, request, username=None, password=None, **kwargs)方法的引數說明：

• request 本次認證的請求物件
• username 本次認證提供的使用者賬號
• password 本次認證提供的密碼

我們想要讓使用者既可以以使用者名稱登入，也可以以手機號登入，那麼對於authenticate方法而言，username引數即表示使用者名稱或者手機號。

重寫authenticate方法的思路：

1. 根據username引數查詢使用者User物件，username引數可能是使用者名稱，也可能是手機號
2. 若查詢到User物件，呼叫User物件的check_password方法檢查密碼是否正確

在users應用下建立一個utils.py中編寫：

def get_user_by_account(account):
    """
    根據帳號獲取user物件
    :param account: 賬號，可以是使用者名稱，也可以是手機號
    :return: User物件 或者 None
    """
    try:

        user = models.User.objects.filter(Q(username=account)|Q(mobile=account)).first()
    except models.User.DoesNotExist:
        return None
    else:
        return user

from . import models
from django.db.models import Q
from django.contrib.auth.backends import ModelBackend
class UsernameMobileAuthBackend(ModelBackend):
    """
    自定義使用者名稱或手機號認證
    """

    def authenticate(self, request, username=None, password=None, **kwargs):
        user = get_user_by_account(username)
        #if user is not None and user.check_password(password) :
        if user is not None and user.check_password(password) and user.is_authenticated:
            #user.is_authenticated是看他有沒有許可權的，這裡可以不加上它
            return user

在配置檔案settings/dev.py中告知Django使用自定義的認證後端

AUTHENTICATION_BACKENDS = [
    'users.utils.UsernameMobileAuthBackend',
]

以上就實現了通過使用者名稱或者手機號的一個多條件登入。

跳轉到首頁之後，我們需要顯示的不再是登入註冊按鈕，而是顯示購物車，個人中心等內容，