django+vue前后端分离 实现 登录 实践记载

在使用django+vue完成平台功能开发登录功能，实现后，写这个文章进行记载！！欢迎交流

因为做的是内部使用平台，手动创建账号形式，没用到注册功能，无需实现

一、登录的功能逻辑设计

1、前端页面输入用户电话和密码点击登录

2、后端验证是否登录成功，返回token，存储到localstorage中

3、后端控制token是否过期

二、django后端实现

1、登录接口

接受前端访问请求，验证传递过来的用户是否正确，返回token 以及用户的基础信息

@csrf_exempt
    def login(request):
        try:
            if request.method == 'POST':
                phone = request.POST.get('username')
                password = request.POST.get('password')
                passwd = password + '{' + phone + '}'                
                auth = Blogin().auth_user(phone, psd)
                if auth ['code'] == '000000':
                    if not request.session.session_key:
                        request.session.save()
                        print(str(phone)+"新会话")
                    # request.session.set_expiry(3600*4)
                    md5 = hashlib.md5()
                    md5.update((phone+passwd+"1258"+str(time.time())).encode())
                    token = md5.hexdigest()
                    request.session['token'] = token
                    request.session['id'] = auth['data'][0]['id']
                    request.session['name'] = auth ['data'][0]['user_name']
                    request.session.save()
                    response = auth ['data'][0]
                    response['password'] = token
                    return JsonResponse('登录成功', response, '000000')
                else:
                    return Response('登录失败', auth["msg"], '999999')
        except Exception as e:
            return Response(str(e), auth["msg"], '999999')

2、登出接口

接受前端的访问请求，清空session中的token

@csrf_exempt
    def logout(request):
        request.session.flush()
        return Response('退出登录成功', '', code='000000')

三、vue前端实现

1、前端写页面展示逻辑

2、前端输入内容的rules验证

前两个逻辑较简单，这里就不展示代码了

3、前端调用后端方法处理

其中login是调用后端接口逻辑

vue的method中写

submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          login(this.ruleForm).then(res => {
            if (res.code == '000000') {
              if (this.rememberpwd) {
                //保存帐号到cookie，有效期1天
                setCookie('user_name', res.data['user_name'], 1)
                //保存密码到cookie，有效期1天
                setCookie('user_phone', res.data['user_mobile'], 1)
              } else {
                delCookie('user_name')
                delCookie('user_phone')
              }
              //如果请求成功就让他2秒跳转路由
              setTimeout(() => {
                this.logining = false
                localStorage.setItem('logintoken', res.data['password'])
                // 缓存用户个人信息
                localStorage.setItem('userdata', JSON.stringify(res.data))
                this.$store.commit('login', 'true')
                this.$router.push({ path: '/testcase/TestCase' })
              }, 1000)
            } else {
              this.$message.error(res.msg)
              this.logining = false
              return false
            }
          })
        } else {
          this.$message.error('请输入用户名密码！')
          this.logining = false
          return false
        }
      })
    },

4、js文件中暴露的向后端请求链接

export const login = (params) => { return loginreq("post", "/XXXXX/login", params) };

5、axios发起请求方法

// 登录请求方法
const loginreq = (method, url, params) => {
    return axios({
        method: method,
        url: url,
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        data: params,
        traditional: true,
        transformRequest: [
            function(data) {
                let ret = ''
                for (let it in data) {
                    ret +=
                        encodeURIComponent(it) +
                        '=' +
                        encodeURIComponent(data[it]) +
                        '&'
                }
                return ret
            }
        ]
    }).then(res => res.data);
};