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父组件

<style lang="less">
  @import './login.less';
</style>

<template>
  <div class="login">
    <div class="login-con">
      <Card icon="log-in" title="欢迎登录" :bordered="false">
        <div class="form-con">
          <login-form @on-success-valid="handleSubmit"></login-form>
          <p class="login-tip">输入任意用户名和密码即可</p>
        </div>
      </Card>
    </div>
  </div>
</template>

<script>
	import LoginForm from '@/components/login-form' // 驼峰命名法
	export default {
	    data(){
	      return{

	      }
	    },
		components: {
			LoginForm
	    },
		methods:{
            handleSubmit({username, password}){
                this.$api.api_all.post_user_login_api(
                    username,password
                ).then((response)=>{
                    this.$Message.success(response.data.msg);
                    localStorage.setItem('TOKEN', JSON.stringify(response.data.results.TOKEN)); // 设置TOKEN
                    this.$router.push("/") // 跳转到首页
                }).catch((error)=>{
                    this.$Message.error(error.response.data.msg);
                })
            }
		}
	}
</script>

src/components/login-form/login.js

导出子组件

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

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

login子组件

<template>
	<Form ref="loginForm" :model="form" :rules="ruleslogin" @keydown.enter.native="handleSubmit">
		<FormItem prop="username">
			<Input v-model="form.username" placeholder="请输入用户名">
				<span slot="prepend">
				<Icon :size="16" type="ios-person"></Icon>
				</span>
			</Input>
		</FormItem>
		<FormItem prop="password">
			<Input type="password" v-model="form.password" placeholder="请输入密码">
				<span slot="prepend">
				<Icon :size="14" type="md-lock"></Icon>
				</span>
			</Input>
		</FormItem>
		<FormItem>
			<Button @click="handleSubmit" type="primary" long>登录</Button>
		</FormItem>
	</Form>
</template>

<script>
export default {
	name: 'LoginForm',
	data () {
		return {
			form: {
                username: 'admin',
				password: 'cox123456'
			},
            ruleslogin:{ // 校验表单规则
                username: [ // FormItem标签中的 prop 属性预期值
                    { required: true, message: '用户名不能为空', trigger: 'blur' }
                ],
                password: [ // FormItem标签中的 prop 属性预期值
                    { required: true, message: '密码不能为空', trigger: 'blur' },
                    { type: 'string', min: 6, message: '6位数密码', trigger: 'blur' }
                ]
            }
		}
	},
	methods: {
		handleSubmit () {
			this.$refs.loginForm.validate((valid) => {
			    // this.$refs.loginForm.validate : 获取表单校验结果; 校验正确-> valid为True; 校验失败-> valid为False;
				if (valid) {
					this.$emit('on-success-valid', {
                        username: this.form.username, // 将this.form.username和this.form.password传给父组件的on-success-valid参数
						password: this.form.password // 并使用 username 和 password 接受
					})
				}
			})
		}
	}
}
</script>

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: '<App/>'
});

---

---

---