VUE.JS 在django发送认证信息

1、在使用VUE.js进行用户认证时,可以使用RESTful,reqwest.js,Cookie.js进行操作。

logIn:function () {
    var self = this;
    reqwest({
        url:'/api/token-auth',
        type:'json',
        method:'post',
        data:{
            username:'admin',
            password:'admin12345',
        },
        success:function (resp) {
            console.log(resp);
            Cookies.set('token',resp.token);
            self.getData()
        },
    })
},

其中/api/token-auth,为token-auth验证url,在urls.py中
引入from rest_framework.authtoken import views,urlpattern写入url(r'^api/token-auth$', views.obtain_auth_token),

Paste_Image.png

2、在后台引入相应的库文件

from rest_framework.decorators import api_view, authentication_classes
from rest_framework.authentication import TokenAuthentication #认证库


class VideoSerializer(serializers.ModelSerializer):
    title = serializers.CharField(min_length=1)

    class Meta:
        model = Video
        fields = '__all__'
        depth = 1


@api_view(['GET', 'POST'])
@authentication_classes((TokenAuthentication, )) #装饰器
def video(request):
    video_list = Video.objects.order_by('-id')
    if request.method == 'GET':
        print(request.user)
        print(request.auth)
        serializer = VideoSerializer(video_list, many=True)
        return Response(serializer.data)

    elif request.method == 'POST':
        serializer = VideoSerializer(data=request.data)
        if serializer.is_valid():
            serializer.save()
            return Response(serializer.data, status=status.HTTP_201_CREATED)
        body = {
            'body': serializer.errors,
            'msg': '40001'
        }
        return Response(body, status=status.HTTP_400_BAD_REQUEST)

3、在前台刷新得到信息时

getData:function () {
    var self = this;
    reqwest({
        url:'/api/videos/',
        type:'json',
        headers:Cookies.get('token')? {'Authorization': 'Token ' + Cookies.get('token')}:{},
        success:function (resp) {
            console.log(resp);
            self.vids = resp

        },

    })
},

其中headers部分是发送数据:
headers:Cookies.get('token')? {'Authorization': 'Token ' + Cookies.get('token')}:{},
即得到Token则发送认证,没有数据则发送空值。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容