Vue 登录login例子

login

#0 GitHub

https://github.com/Coxhuang/iView-login

#1 环境

"vue": "^2.5.2",
"axios": "^0.19.0",
"vue-axios": "^2.1.4",
"vue-router": "^3.0.1",
"view-design": "^4.0.0" // iView-UI 组件

1. iView – UI组件
2. axios – 发送http请求
3. localStorage – 存储TOKEN

#2 实现功能

1. 登录
2. 获取TOKEN
3. 保存TOKEN
4. 发送http请求携带TOKEN

#3 iView

具体如何配置iView这里直接跳过

1. 新增以下文件

src/components/login/login.less
src/components/login/login.vue
src/components/login-form/login.js
src/components/login-form/login-form.vue
src/utils/axios.js
src/api/index.js
src/api/api.js

src/components/login/login.less

样式

.login{
    width: 100%;
    height: 100%;
    background-image: url('../../assets/images/login-bg.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
    &-con{
        position: absolute;
        right: 160px;
        top: 50%;
        transform: translateY(-60%);
        width: 300px;
        &-header{
            font-size: 16px;
            font-weight: 300;
            text-align: center;
            padding: 30px 0;
        }
        .form-con{
            padding: 10px 0 0;
        }
        .login-tip{
            font-size: 10px;
            text-align: center;
            color: #c3c3c3;
        }
    }
}

src/components/login/login.vue

login父组件

src/components/login-form/login.js

导出子组件

import LoginForm from './login-form.vue'
export default LoginForm

src/components/login-form/login-form.vue

login子组件

src/utils/axios.js

axios拦截

import axios from 'axios' // 导入node_modules里的axios
import qs from 'qs'

axios.defaults.baseURL = "http://127.0.0.1:8000/"; // 后端接口 ip:port

axios.interceptors.request.use((request) => {
    //在发送请求之前做某件事
    var token = JSON.parse(localStorage.getItem('TOKEN'));
    if (token) {
        token = "TOKEN " + token;
        request.headers.common['Authorization'] = token;
    }
    if(request.method  === 'post'){
        request.data = qs.stringify(request.data);
    }
    return request;
},(error) =>{
    console.log('错误的传参');
    return Promise.reject(error);
});

export default axios // 导出axios

src/api/index.js

导出api.js

import api_all from './api'

export default {
    api_all
}

src/api/api.js

后端api接口 (我这里用的是Django框架,具体接口代码不在这里过多解释,也可以使用mock假数据作为后端接口)

import axios from '@/utils/axios'

const api_all = {
    // 获取所有博文列表
    post_user_login_api(username,password) {
        return axios({
            url: '/api/user/login/',
            method: 'POST',
            data: {
                username: username,
                password: password,
            }
        })
    },
    get_article_list() {
        return axios({
            url: '/api/article/list-article/',
            method: 'GET',
        })
    },
    create_test(dog) {
        return axios({
            url: '/api/test/create/',
            method: 'POST',
            data: {
                dog: dog
            },
        })
    },
};

export default api_all

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import ViewUI from 'view-design';
import 'view-design/dist/styles/iview.css';
import axios from "./api/";


Vue.prototype.$api = axios;
Vue.use(ViewUI);
Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    store,
    components: { App },
    template: ''
});

---

---

---