JWT authentication is the JSON Web Token authentication. For details, see juejin.cn/post/695528…

The custom authentication JWT: getblimp. Making. IO/django – rest…

JWT installation and configuration

The installation

Run the following command in the virtual environment

pip install djangorestframework-jwt
Copy the code

configuration

Total Route Configuration

renranapi/utils/utils.py

from django.contrib import admin
from django.urls import path,include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('users/',include('users.urls')),]Copy the code

Shunt configuration

renranapi/apps/users/urls.py

Obtain_jwt_token: indicates whether the user name and password are valid, produces the token value, and uses the post method — user to query dev.py: user.user

from django.urls import path
from rest_framework_jwt.views import obtain_jwt_token

urlpatterns=[
	path('login/',obtain_jwt_token)
]
Copy the code

Postman test

The back-end environment has been installed and configured

The front end

Configuring the Login Button

• login.vue

Line32 adds the click action

    <button @click="loginHandler" class="sign-in-button" id="sign-in-form-submit-btn" type="button">
      <span id="sign-in-loading"></span>Login < / button >Copy the code

Line56 The front-end requests the back-end database

<script>
    export default {
        name: "Login".data(){
          return {
            username:' '.password:' ',}},methods: {loginHandler(){
            this.$axios.post( `The ${this.$settings.host}/users/login/`, {username:this.username,
              password:this.password,
            }).then((res) = >{
              console.log(res);
            }).catch((error) = >{
              console.log(error);
            })
          },
      }
    }
</script>
Copy the code

line 16-25

 <div class="input-prepend restyle js-normal">
        <input v-model="username" placeholder="Mobile phone number or email address" type="text" name="session[email_or_mobile_number]" id="session_email_or_mobile_number">
        <i class="iconfont ic-user"></i>
      </div><! -- Overseas Login Login name input box --><div class="input-prepend">
      <input v-model="password" placeholder="Password" type="password" name="password" id="session_password">
      <i class="iconfont ic-password"></i>
    </div>
Copy the code

• settings.js

export default{# will be original127.0. 01.:8000Change what to the new URL'host': 'http://api.renran.com:8000',}Copy the code

• Log on to the test

Incorrect password:

Correct password:

Remember me certification

For browsers, return sessionStorage if the password is not saved; Save the password and return to localStorage, as shown

login.vue line28

 <div class="remember-btn">
      <input type="checkbox" v-model="remember_me"name="remember_me" id="session_remember_me"><span>Remember that I</span>
    </div>
Copy the code

line59

data(){
          return {
            username:' '.password:' '.remember_me:false,}},methods: {loginHandler(){
            this.$axios.post( `The ${this.$settings.host}/users/login/`, {username:this.username,
              password:this.password,
            }).then((res) = >{
              console.log(res);
              if (this.remember_me){
                localStorage.token = rens.data.token;
                // sessionstorage.clear () clears all sites of sessionStorage
                sessionStorage.removeItem(`token`);

              }else {
                sessionStorage.token = res.data.token;
                localStorage.removeItem(`token`);
              }

            }).catch((error) = >{
              console.log(error); }})},Copy the code

Confirm box after login

Element-ui download: element.eleme.cn/#/zh-CN/com…

// Go to the home page after successful login
        this.$confirm('Login succeeded. Do you want to continue? '.'tip', {
          confirmButtonText: 'sure'.cancelButtonText: 'cancel'.type: 'warning'
        }).then(() = > {
         this.$router.push('/');
        }).catch(() = > {
          this.$message({
            type: '? '.message: 'Don't log in? '
          });
        });

            }).catch((error) = >{
              this.$message({
                type:'error'.message:'Wrong username or password'}})})},Copy the code