Django 和 vue 的登录验证

1.前端利用vue中的axios进行传值，将获取到的账号密码以form表单的形式发送给后台django。
2.后台django 校验用户信息是否正确，然后用session记录用户的登录状态，下次请求时候用session验证。

前端

1. axios 配置：
主要是在请求前添加django 的csrf 防护功能的验证token

// axios 配置
import axios from 'axios'
import store from './store'
// axios 全局配置
axios.defaults.baseURL = 'http://127.0.0.1:8000/';
axios.defaults.xsrfCookieName = 'csrftoken';
axios.defaults.xsrfHeaderName = 'X-CSRFToken';
axios.defaults.withCredentials = true

// 请求拦截
axios.interceptors.request.use(
  config => {
    if (store.getters.token) { // 若存在token，则每个Http Header都加上token
      config.headers.Authorization = `token ${store.getters.token}`
    }
    console.log('request请求配置', config)
    console.log(`token is ${store.getters.token}`)
    return config
  },
  err => {
    return Promise.reject(err)
  })
// 响应 拦截
axios.interceptors.response.use(
  response => {
    // console.log('成功响应：', response)
    return response
  },
  error => {
    if (error.response) {
      console.log(error.response)
    }
    return Promise.reject(error.response) // 返回接口返回的错误信息
  }
)
export default axios

2. form 表单提交过程
注： ElementUI 的from 表单，非常好用

login(formName) {
      this.$refs[formName].validate(valid => {
        let username = encodeURIComponent(this.ruleForm.username);
        let password = this.ruleForm.password.toString();
        console.log(`username is ${username}`)
        console.log(`password is ${password}`)
        let data = {
          'username': username,
          'password': password,
        }
        if (valid) {
          axios.request({
            url:'/user/login',
            method: 'post',
            data: Qs.stringify(data),
          }).then((res) => {
            console.log(res)
            // this.bindLogin(this.ruleForm.name)
            // this.saveUser(this.ruleForm.name)
            this.$notify({
              title: '成功',
              message: '恭喜，登录成功。',
              duration: 3000,
              type: 'success'
            })
            setTimeout(() => {
              this.$router.push({
                path: '/'
              })
            }, 500)

          }).catch((err) => {
            console.log(err)
          })
        }
      })

后台

1. settting.py 中session 的配置
1.1 MIDDLEWARE_CLASSES 确保其中包含以下内容

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

1.2 INSTALLED_APPS 确保其中包含以下内容

'django.contrib.sessions'

1.3 添加一些配置

# session 配置
SESSION_ENGINE = 'django.contrib.sessions.backends.db'  # 引擎（默认）
SESSION_COOKIE_DOMAIN = None  # Session的cookie保存的域名（默认）
SESSION_COOKIE_SECURE = False  # 是否Https传输cookie（默认）
SESSION_COOKIE_HTTPONLY = True  # 是否Session的cookie只支持http传输（默认）
SESSION_COOKIE_AGE = 60  # Session的cookie失效日期（1209600 2周 默认）
SESSION_EXPIRE_AT_BROWSER_CLOSE = True  # 是否关闭浏览器使得Session过期（False 默认）
SESSION_SAVE_EVERY_REQUEST = False  # 是否每次请求都保存Session，默认修改之后才保存

# 跨域忽略
CORS_ALLOW_CREDENTIALS = True  # 允许带cookie
CORS_ORIGIN_ALLOW_ALL = True   # 允许所有源访问

2. 登录view视图

class LoginView(View):
    def get(self, request):
        return token.token(request)

    def post(self, request):
        """登录校验"""
        # 接收数据
        username = request.POST.get('username')
        password = request.POST.get('password')
        # 校验数据
        if not all([username, password]):
            # 数据不完整
            _info['msg'] = '信息不完整'
            return HttpResponse(json.dumps(_info))
        # 登录校验
        user = authenticate(username=username, password=password)
        if user is not None:  # 用户名密码正确
            # 记录用户的登录状态
            # login(request, user)
            request.session['username'] = user.username
            request.session['is_login'] = True

            _info['msg'] = '登录成功'
            _info['result'] = '登录成功'
            res = HttpResponse()
            res.content = json.dumps(_info)
            res.set_cookie('username', username)
            return res

        else:
            # 用户名或密码错误
            _info['msg'] = '用户名或密码错误'
            _info['result'] = '登录错误'
            return HttpResponse(json.dumps(_info))

3. 登录验证的装饰器

def login_required(view_func):
    # 登录判断装饰器
    def wrapper(request, *view_args, **view_kwargs):
        if request.COOKIES.get("username", None): 
            name = request.COOKIES.get("username", None)
            print('get cookie [{}]'.format(name))
        # 判断用户是否登录,session验证
        if request.session.get("is_login", None):
            name = request.session.get("username", None)
            print('get session username is [{}]'.format(name))
            return view_func(request, *view_args, **view_kwargs)
        else:
            # 用户未登录,返回信息
            _info['msg'] = '还未登录'
            return HttpResponse(json.dumps(_info))
    return wrapper

4. 在需要登录才能访问的视图中用登录装饰器装饰即可

@login_required
def get_citys_data(request):
    print('get citys data')
    test_datas = Citys.objects.all()
    data_list = [data.area for data in test_datas]
    _info = define_info.res_info
    _info['msg'] = ''
    _info['result'] = data_list
    
    res = HttpResponse()
    res.content = json.dumps(_info)
    return res

结果