django rest framework vue 实现用户登录详解

django rest framework vue 实现用户登录详解实现用户登录详解

主要介绍了django rest framework vue 实现用户登录详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

后端代码就不介绍了，可以参考 django rest framework 实现用户登录认证

这里介绍一下前端代码，和前后端的联调过程

在components下新建login.vue 文件

<template>

<div class="login">

<el-form label-width="80px">

<el-form-item>

<el-button type="primary" @click="onLogin">登录</el-button>

<el-button>取消</el-button>

</el-form-item>

</el-form>

</div>

</template>

<script>

import axios from 'axios';

export default {

}

}

},

methods: {

onLogin() {

axios.post('http://127.0.0.1:8000/api/v1/auth/',this.form,{withCredentials:true}).then((res)=> {

console.log(res);

this.$router.go({path:'/'});

});

}

margin: 0 auto;

}

</style>

修改rounter下index.js

import Vue from 'vue'

import Router from 'vue-router'

import HelloWorld from '@/components/HelloWorld'

import test from '@/components/test'

import runoob from '@/components/runoob'

import vhtml from '@/components/vhtml'

name: 'HelloWorld',

component: HelloWorld

},

{

path: '/test',

name: 'test',

component: test

}

,

{

path: '/runoob',

name: 'runoob',

component: runoob

},

{

path: '/vhtml',

name: 'vhtml',

component: vhtml

},

]

// router.go('/login');

// }else {

// next();

// }

next();

})

export default router;

修改项目 man.js

// The Vue build version to load with the `import` command

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

Vue.config.productionTip = false