Django和Vue实现登录

 Django后端连接数据库实现登录

import jwt
import json
import datetime
from django.views import View
from django.http import JsonResponse
class denglu(View):
    def post(self,request):
        z=json.loads(request.body)
        s=warehouse.objects.filter(users=z['input1'],password=z['input2']).values()
        if s:
            dic = {
                'exp': datetime.datetime.now() + datetime.timedelta(days=1),  # 过期时间
                'iat': datetime.datetime.now(),  # 开始时间
                'iss': 'lianzong',  # 签名
                'data': {  # 内容，一般存放该用户id和开始时间
                    'a': 1,
                    'b': 2,
                },
            }
            s1 = jwt.encode(dic, 'secret', algorithm='HS256')  # 加密生成字符串
            return JsonResponse({'data': s1,'code':200,'message':'登录成功'})
        else:
            return JsonResponse({'code': 400,'message':'密码或用户名错误'})

vue通过点击事件执行denglu()，把输入的数据发送给后端，后端判断数据库中是否存在，存在则返回jwt将jwt保存到本地，不存在则返回密码或用户名错误。

async denglu(){
        var z=await this.$http.post('/manpowers/denglu/',this.form)
        if (z.data.code==200){
          this.$message.success('登录成功')
          window.sessionStorage.setItem("token",z.data.data)
          this.$router.push("/main")
        }else{
          this.$message.error(z.data.message)
        }

 导航路由守卫

// 挂载路由导航守卫,实现页面访问权限
router.beforeEach((to, from, next) => {
    // to将要访问的路径
    // from代表从那个路径跳转而来
    // next是一个函数，表示放行
    if (to.path === '/'){
    return next()
    
  }else{
      // 获取token
      const tokenStr = window.sessionStorage.getItem('token')
      if (!tokenStr) return next('/')
      next()
    
  }

退出登录，删除token

tuichu(){
        var storage = window.localStorage;
        storage.removeItem('token')   //第一种方法
        // storage.clear();    //第二种方法
        /* 跳回登录地址 */
        this.$router.push('/'); 

      }