Django 和 vue 的登录验证

た入场券 2023-06-28 06:26 36阅读 0赞

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

#### 结果 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTYxODMz_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTYxODMz_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTYxODMz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200107230257170.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTYxODMz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTYxODMz_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200107230308457.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTYxODMz,size_16,color_FFFFFF,t_70