django rest_framework vue 实现用户登录

后端代码就不介绍了，可以参考 django rest_framework 实现用户登录认证

这里介绍一下前端代码，和前后端的联调过程

在components下新建login.vue 文件

<template>

    <div class="login">

      <el-form label-width="80px">

        <el-form-item label="用户名">

          <el-input v-model="form.username"></el-input>

        </el-form-item>

        <el-form-item label="密码">

          <el-input v-model="form.password" type="password"></el-input>

        </el-form-item>

        <el-form-item>

          <el-button type="primary" @click="onLogin">登录</el-button>

          <el-button>取消</el-button>

        </el-form-item>

      </el-form>

    </div>

</template>

<script>

import axios from 'axios';

export default {

  name: "login",

  data() {

    return {

      form: {

        username: null,

        password: null

      }

    }

  },

  methods: {

    onLogin() {

      axios.post('http://127.0.0.1:8000/api/v1/auth/',this.form,{withCredentials:true}).then((res)=> {

        console.log(res);

        this.$router.go({path:'/'});

      });

    }

  }

}

</script>

<style scoped>

.login {

  width: 50%;

  margin: 0 auto;

}

</style>

修改rounter下index.js

import Vue from 'vue'

import Router from 'vue-router'

import HelloWorld from '@/components/HelloWorld'

import test from '@/components/test'

import runoob from '@/components/runoob'

import vhtml from '@/components/vhtml'

import Login from '@/components/login'

Vue.use(Router)

var router =  new Router({

  routes: [

    {

      path: '/',

      name: 'HelloWorld',

      component: HelloWorld

    },

    {

      path: '/test',

      name: 'test',

      component: test

    }

    ,

    {

      path: '/login',

      name: 'login',

      component: Login

    }

    ,

    {

      path: '/runoob',

      name: 'runoob',

      component: runoob

    },

    {

      path: '/vhtml',

      name: 'vhtml',

      component: vhtml

    },

  ]

})

router.beforeEach((to,from,next)=> {

  if(to.path==='/login') {

    window.hideLogin = false;

  }

  // if(!window.token&&to.path!=='/login') {

  //   router.go('/login');

  // }else {

  //   next();

  // }

  next();

})

export default router;

修改项目 man.js

// The Vue build version to load with the `import` command

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import Vue from 'vue'

import App from './App'

import router from './router'

import ElementUI from 'element-ui'

import axios from 'axios'

Vue.prototype.axios = axios

Vue.config.productionTip = false

Vue.use(ElementUI); // 引入elementui

/* eslint-disable no-new */

new Vue({

  el: '#app',

  router,

  components: { App },

  template: '<App/>'

})

启动项目 npm run dev

输入url,访问查看页面

启动服务端

浏览器打开检查功能

数据用户名和密码，点击登录如下图。

因为还没做登录跳转页。所以先通过这种方式，检验是否登录成功。

查看后台返回信息

遇到的问题：

1、跨域问题

因为vue 和django项目是两个前后端独立的项目，分别启动后，存在端口不一致的跨域问题。

如这里vue端口是8080，django 是8000,会一直存在找不到服务的问题。

解决方法：修改jango settings.py 文件

首先安装 corsheaders

# 安装

pip install django-cors-headers

# 添加 corsheaders 应用

# Application definition

INSTALLED_APPS = [

    'django.contrib.admin',

    'django.contrib.auth',

    'django.contrib.contenttypes',

    'django.contrib.sessions',

    'django.contrib.messages',

    'django.contrib.staticfiles',

    'rest_framework',

    'api',

    'corsheaders',  # 解决跨域问题 修改1

]

# 中间层设置

# 添加如下

MIDDLEWARE = [

    ...

    'corsheaders.middleware.CorsMiddleware',

    'django.middleware.common.CommonMiddleware',

    ...

]

# CORS 设置跨域域名 配置白名单

CORS_ORIGIN_WHITELIST = [

    "https://example.com",

    "https://sub.example.com",

    "http://localhost:8080",

    "http://localhost:8000",

    "http://127.0.0.1:8000"

]

#直接允许所有主机跨域

CORS_ORIGIN_ALLOW_ALL = True 默认为False

CORS_ALLOW_CREDENTIALS = True # 允许携带cookie

# 下面这两个设置 经测试无用 

#

# # 解决跨域问题 修改5

# CORS_ALLOW_METHODS = (

#     'DELETE',

#     'GET',

#     'OPTIONS',

#     'PATCH',

#     'POST',

#     'PUT',

#     'VIEW',

# )

# # 解决跨域问题 修改6

# CORS_ALLOW_HEADERS = (

#     'XMLHttpRequest',

#     'X_FILENAME',

#     'accept-encoding',

#     'authorization',

#     'content-type',

#     'dnt',

#     'origin',

#     'user-agent',

#     'x-csrftoken',

#     'x-requested-with',

#     'Pragma',

# )

settings.py文件

"""

Django settings for logintest project.

Generated by 'django-admin startproject' using Django 2.1.2.

For more information on this file, see

https://docs.djangoproject.com/en/2.1/topics/settings/

For the full list of settings and their values, see

https://docs.djangoproject.com/en/2.1/ref/settings/

"""

import os

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

# Quick-start development settings - unsuitable for production

# See https://docs.djangoproject.com/en/2.1/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!

SECRET_KEY = 'zj9a#c4al&@_up8^g46ke44a1l%p^_wa1_5xgx60ertwu9$y(%'

# SECURITY WARNING: don't run with debug turned on in production!

# DEBUG = True

DEBUG = False

ALLOWED_HOSTS = ['localhost', '127.0.0.1']

# Application definition

INSTALLED_APPS = [

    'django.contrib.admin',

    'django.contrib.auth',

    'django.contrib.contenttypes',

    'django.contrib.sessions',

    'django.contrib.messages',

    'django.contrib.staticfiles',

    'rest_framework',

    'api',

    'corsheaders',  # 解决跨域问题 修改1

]

MIDDLEWARE = [

    'django.middleware.security.SecurityMiddleware',

    'django.contrib.sessions.middleware.SessionMiddleware',

    'django.middleware.common.CommonMiddleware',

    'django.middleware.csrf.CsrfViewMiddleware',

    'django.contrib.auth.middleware.AuthenticationMiddleware',

    'django.contrib.messages.middleware.MessageMiddleware',

    'django.middleware.clickjacking.XFrameOptionsMiddleware',

    'corsheaders.middleware.CorsMiddleware',  # 解决跨域问题 修改2

    'django.middleware.common.CommonMiddleware', # 注意顺序 解决跨域问题 修改3

]

ROOT_URLCONF = 'logintest.urls'

#

# #跨域增加忽略 修改4

CORS_ALLOW_CREDENTIALS = True

CORS_ORIGIN_ALLOW_ALL = True

# # CORS_ORIGIN_WHITELIST = (

# #     '*'

# # )

CORS_ORIGIN_WHITELIST = [

    "https://example.com",

    "https://sub.example.com",

    "http://localhost:8080",

    "http://localhost:8000",

    "http://127.0.0.1:8000"

]

#

#

# # 解决跨域问题 修改5

# CORS_ALLOW_METHODS = (

#     'DELETE',

#     'GET',

#     'OPTIONS',

#     'PATCH',

#     'POST',

#     'PUT',

#     'VIEW',

# )

# # 解决跨域问题 修改6

# CORS_ALLOW_HEADERS = (

#     'XMLHttpRequest',

#     'X_FILENAME',

#     'accept-encoding',

#     'authorization',

#     'content-type',

#     'dnt',

#     'origin',

#     'user-agent',

#     'x-csrftoken',

#     'x-requested-with',

#     'Pragma',

# )

TEMPLATES = [

    {

        'BACKEND': 'django.template.backends.django.DjangoTemplates',

        # 'DIRS': [],

        'DIRS': ['vuefront/dist'],  # 修改1

        'APP_DIRS': True,

        'OPTIONS': {

            'context_processors': [

                'django.template.context_processors.debug',

                'django.template.context_processors.request',

                'django.contrib.auth.context_processors.auth',

                'django.contrib.messages.context_processors.messages',

            ],

        },

    },

]

# 新增2

# Add for vue.js

STATICFILES_DIRS = [

    os.path.join(BASE_DIR, "vuefront/dist/static"),

]

WSGI_APPLICATION = 'logintest.wsgi.application'

# Database

# https://docs.djangoproject.com/en/2.1/ref/settings/#databases

# DATABASES = {

#     'default': {

#         'ENGINE': 'django.db.backends.sqlite3',

#         'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),

#     }

# }

# MySQL  adil   密码：helloyyj

DATABASES = {

    'default':{

     'ENGINE':'django.db.backends.mysql',

     'HOST':'127.0.0.1',

     'PORT':'',

     'NAME':'pyweb',  # 数据库名

     'USER':'adil',

     'PASSWORD':'helloyyj',

     'OPTIONS':{

         'sql_mode': 'traditional'

     },

    }

}

# Password validation

# https://docs.djangoproject.com/en/2.1/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [

    {

        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',

    },

    {

        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',

    },

    {

        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',

    },

    {

        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',

    },

]

# Internationalization

# https://docs.djangoproject.com/en/2.1/topics/i18n/

# LANGUAGE_CODE = 'en-us'

#

# TIME_ZONE = 'UTC'

LANGUAGE_CODE = 'zh-Hans'

TIME_ZONE = 'Asia/Shanghai'

USE_I18N = True

USE_L10N = True

USE_TZ = True

# Static files (CSS, JavaScript, Images)

# https://docs.djangoproject.com/en/2.1/howto/static-files/

STATIC_URL = '/static/'