前后端分离-登录

后端

# 登录
import re
class LoginView(APIView):
    def post(self, request):
        name = request.data.get('name')
        pwd = request.data.get('pwd')

        # 判断账号是不是手机号
        ser = r'^1[3-9][0-9]{9}$'
        if re.findall(ser,name):
            name_first = User.objects.filter(nobile=name).first()
        else:
            name_first = User.objects.filter(username=name).first()


        # 判断是否存在
        # name_first = User.objects.filter(username=name).first()
        if not name_first:
            return Response({
                'code': 400,
                'msg': '用户名或密码不正确'
            })

        import jwt,time
        from django.conf import settings

        payload = {
            'id': name_first.id,
            'name': name_first.username,
            'exp': int(time.time()) + (60 * 60 * 24 * 30)
        }
        token = jwt.encode(payload, key=settings.SECRET_KEY, algorithm='HS256')


        # 判断密码
        if pwd == name_first.password:
            return Response({
                'code': 200,
                'msg': '登录成功',
                'login': {
                    'name': name_first.username,
                    'pwd': name_first.password
                },
                'token': token
            })
        else:
            return Response({
                'code': 400,
                'msg': '用户名或密码不正确'
            })

vue前端

  methods: {
    //将store中的actions方法映射到methods
    ...mapActions(["setUser", "setShowLogin"]),

    // 点击登录触发
    Login() {
      // 通过element自定义表单校验规则，校验用户输入的用户信息
      this.$refs["ruleForm"].validate(valid => {
        //如果通过校验开始登录
        if (valid) {
          // TODO 登录
          console.log("开始登录，用户名", this.LoginUser.name, "密码", this.LoginUser.pass)

          this.$axios.post('user/login/', {
            'name':this.LoginUser.name,
            'pwd':this.LoginUser.pass
          }).then(resp =>{
            if (resp.data.code == 200){
              this.LoginUser.name = ''
              this.LoginUser.pass = ''

              // 关闭登录窗口
              this.setShowLogin(false)

              // 把放回的用户信息插入vuex里面
              this.setUser({
                'userName': resp.data.login.name
              })

              localStorage.setItem('user',JSON.stringify({
                'userName': resp.data.login.name
              }))    
              localStorage.setItem('token',resp.data.token)          

              // 放回响应
              this.notifySucceed(resp.data.msg)
            }else{
              this.notifyError(resp.data.msg)
            }
          })
          .catch(err =>{
            console.log(err)
          })
        }
      });
    },
    checkUserName(){

    }
  }
};

退出登录

    // 退出登录
    logout() {
      // 不显示退出登录框
      this.visible = false;

      // TODO 退出登录
      localStorage.removeItem('user')
      localStorage.removeItem('token')
      this.setUser(false)

    },