Vue实战开发--后台管理系统Vue+Element ui（12）

本节课完成登录页面以及登录接口。登录页面前提

1.新建路由/login。

在router文件中添加路径为/login的路由，引入视图，注意是与路径“/”为兄弟关系。

    {
        path:'/login',
        name:'login',
        component:()=>import('../view/login/login.vue')
    }

在view下新建login文件夹，新建login.vue，模板页面。

<template>
    <div>登录页面</div>
</template>
<script>
    export default{
        name:'login',
        data(){
            return{}
        }
    }
</script>

2.login页面

页面有账号和密码两个表单域，引入表单el-form，添加属性，添加model属性“form”，states-icon表示表单校验图标，rules表单校验，新建校验名为“rules”，新建ref属性为“form”，以此能拿return里的form内容。label-width为名称的宽度。在return中定义rules{}。rules为一个对象，里面有两个数组对象，一个是username，一个是password。每个对象包含三个属性。第一个对象是required，必填，属性为true，校验不通过信息message，触发方式trigger为blur（布尔类型）。对二哥对象为长度限制，min为最小长度。

            return{
                form:{},
                rules:{
                    username:[
                        {
                            required:true,message:"请输入用户名",trigger:"blur"
                        },
                        {
                            min:3,
                            message:"用户名长度不得小于3位",
                            trigger:"blur"
                        },
                    ],
                    password:[
                        {
                            required:true,message:"请输入密码",trigger:"blur"
                        }
                    ]
                }
            }

开始填写卡片里的内容，新建h3标签，表单域用el-form-item标签，label为表单域名称，label-width为名称的宽度，prop属性绑定rules（？有疑问，为什么prop估计可以接受return里到的数据），el-input绑定v-model很重要，绑定form下的form.username，password同理。现在form为空，所以不好理解。加上登录按钮。

<template>
    <el-form
        :model="form"
        status-icon
        :rules="rules"
        ref="form"
        label-width="100px"
        class="login-container">
        <h3 class="login-title">系统登录</h3>
        <el-form-item
            label="用户名"
            label-width="80px"
            prop="username"
            class="username">
                <el-input
                type="input"
                v-model="form.username"
                autocomplete="off"
                placeholder="请输入账号">
                </el-input>    
        </el-form-item>
        <el-form-item
            label="密码"
            label-width="80px"
            prop="password"
            >
                <el-input
                type="password"
                v-model="form.password"
                autocomplete="off"
                placeholder="请输入密码">
                </el-input>    
        </el-form-item>
        <el-form-item class="login_submit">
            <el-button type="primary" @click="login" class="login_submit">登录</el-button>
        </el-form-item>
    </el-form>
</template>

更改样式

<style lang="less" scoped>
.login-container{
    border-width: 15px;
    background-clip: padding-box;
    margin: 180px auto;
    width:350px;
    padding: 35px 35px 15px 35px;
    background-color: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
}
.login-title{
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
}
.login_submit{
    margin: 10px auto 0px auto;
}
</style>

3.登录权限凭证token

登录需要用到token，用户输入账户密码，前端调用接口将数据传送给后端，后端根据数据库校验，校验成功后给出一个登录凭证，也就是“token”。

安装依赖js-cookie，cnpm i js-cookie@1.0.1，在store中新建user.js，引入cookie，向外暴露，定义一个state，定义token为空，mutations编几个方法用来改变token，setToken（）接收两个参数state、val，val为val赋值给token。调用cookie的set方法，接收两个参数，第一个是cookie的名称，第二个是传入的值val，清除cookie方法clearToken（）方法，方法同理，将token置空，cookie的remove方法将token清空（？），获取token方法getToken（）方法，获取token调用cookie的get方法，如果当前缓存中有token，我们直接cookie.get(token名称)获取，如果没有，要从state中获取，双竖线表示容错。

import Cookie from 'js-cookie'
export default{
    state:{
        token:'',
    },
    mutations:{
        setToken(state,val){
            state.token=val
            Cookie.set('token',val)
        },
        clearToken(){
            state.token = ''
            Cookie.remove('token')
        },
        getToken(state){
            // state.token = state.token || Cookie.get('token')
            state.token = Cookie.get('token') || state.token
        }
    }
}

注意需要在store中引入user.js，并且向外暴露。

import tab from './tab'
import user from './user'

Vue.use(Vuex)
export default new Vuex.Store({
    modules:{
        tab,
        user
    }
})

4.路由导航守卫

更改main.js,路由进行跳转的时候，我们可以通过导航守卫监听，router.beforeEach()方法可以监听，接收一个箭头函数，接收三个参to，from，next。commit调用getToken（commit用法？），这样做是为了防止页面刷新后丢失了token信息，这里需要一个判断，如果token不存在并且当前页不是/login,那么我们直接返回/login页，to.name表示当前页。如果是其他情况，那么正常跳转即可。

router.beforeEach((to,from,next)=>{
  store.commit('getToken')
  const token = store.state.user.token
  if(!token && to.name !=='login'){
    next({ name:'login' })
  }else{
      next()
  }
})

5.login登录事件

更改login.vue，引入mock。

import Mock from 'mockjs'

编写login（）方法，token直接用Mock.random()方法生成随机数，调用setToken并传入token。这里登录先写死。

        methods:{
            login(){
                const token = Mock.random.guid()
                this.$store.commit('setToken,token')
                this.$router.push({ name:'home' })
            }
        }

6.效果

即使手动更改路由，页面还是会跳转到/login页面，效果完成.（存在bug，目前尚未解决）

7.提示

由于本人工作原因，并且电脑硬盘损坏，所以无法持续更新该系列内容，非常抱歉！