vue + Element UI实现后台管理系统登录过程的实现

一、登录过程分析

1. 在登录页面当中，引用Element UI中的input输入框，配置 :model="loginForm"，同时在列表项input输入框中结合v-model命令，v-model="loginForm.username"，实现双向数据绑定。对于data中的数据，也需要进行定义之前model所绑定的数据loginForm，这个也是录表单的数据绑定对象，在loginForm中定义具体的数据，比如username，这样在表单中通过loginForm.username拿到数据了。
2. 对于登录表单的校验，当离开选项框的时候，验证是否合法，需要配置 :rules="loginFormRules"，进行配置绑定校验规则。在data中的数据，定义loginFormRules，在里面配置校验规则，比如username: []，里面就是具体的规则项，验证用户名是否合法。
3. 当点击登录以后，通过@click="login"，触发登录事件，在methods中定义login函数，进行表单的预校验。如果预验证为false，那么就不发起请求。如果预验证为true，那么就发起登录请求。由于返回值是一个promise对象，异步的，所以可以结合async和await。通过状态码校验是否成功，如果成功，将登录成功之后的token，保存到客户端的sessionStorage。token只在当前网站打开期间生效，关闭网站之后不生效，所以token保存在sessionStorage中。通过编程式导航跳转到后台主页，路由地址是 /home。
4. 如果在登录页面中，需要进行重置，通过@click="resetLoginForm"，触发重置事件。点击重置按钮，重置登录表单，可以通过Element UI中自带的一个resetFields()方法进行重置字段，通过ref可以拿到表单对象，再取到表单的所有数据，进行清除。
5. 登录页面的完整代码 login.vue：

<template>
    <div class="login_container">
        <div class="login_box">
            <!-- 头像区域 -->
            <div class="avatar_box">
                <img src="../assets/login.jpeg" alt="">
            </div>
            <!-- 登录表单区域 -->
            <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form">
                <!-- 用户名 -->
                <el-form-item prop="username">
                    <el-input prefix-icon="iconfont icon-yonghu" v-model="loginForm.username"></el-input>
                </el-form-item>
                <!-- 密码 -->
                <el-form-item prop="password">
                    <el-input prefix-icon="iconfont icon-icon_suo-" v-model="loginForm.password" type="password"></el-input>
                </el-form-item>
                <!-- 按钮区域 -->
                <el-form-item class="btns">
                    <el-button type="primary" @click="login">登录</el-button>
                    <el-button type="info" @click="resetLoginForm">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>

export default {
  data () {
    return {
      // 登录表单的数据绑定对象
      loginForm: {
        username: 'admin',
        password: '123456'
      },
      loginFormRules: {
        // 验证用户名是否合法
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        // 验证密码是否合法
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 点击重置按钮，重置登录表单
    resetLoginForm () {
      this.$refs.loginFormRef.resetFields()
    },
    // 点击登录按钮，进行登录
    login () {
      // 表单的预验证
      this.$refs.loginFormRef.validate(async (valid) => {
        // console.log(valid)
        // 如果预验证为false，那么就不发起请求
        if (!valid) return
        // 如果预验证为true，那么就发起登录请求
        // console.log(result) //返回值为promise对象，用await和async，异步的
        const {data: res} = await this.$http.post('login', this.loginForm)
        if (res.meta.status !== 200) return this.$message.error('登录失败')
        this.$message.success('登录成功')
        // console.log(res)
        // 将登录成功之后的token，保存到客户端的额sessionStorage
        // 项目当中除了登录之外的其它API接口，必须在登录之后才能够访问
        // token只在当前网站打开期间生效，关闭网站之后不生效，所以token保存在sessionStorage中
        window.sessionStorage.setItem('token', res.data.token)
        // 通过编程式导航跳转到后台主页，路由地址是 /home
        this.$router.push('/home')
      })
    }
  }
}
</script>

<style lang="less" scoped>
.login_container {
    background-color: #2b4b6b;
    height: 100%;
}
.login_box {
    width: 450px;
    height: 300px;
    background-color: #fff;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    .avatar_box {
        width: 130px;
        height: 130px;
        border: 1px solid #eee;
        border-radius: 50%;
        padding: 10px;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;
        img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #eee;
        }
    }
}

.login_form {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

.btns {
    display: flex;
    justify-content: flex-end;
}
</style>

二、登录的导航守卫拦截

1. 对于登录的导航守卫，如果用户未登录，就想要访问管理系统的页面，应该是进行拦截的，只有登录以后才能够访问页面，可以使用router.beforeEach()这个方法，进行导航守卫的拦截。
2. router.beforeEach((to, from, next))中有三个参数，to 将要访问的路径，from 代表从哪个路径跳转而来的，next 是一个函数表示放行。如果用户访问的是登录页，直接放行。如果访问的管理系统的页面，那么从sessionStorage中获取保存的token值。如果token的值不存在，强制跳转到登录页。存在token，那么就放行。
3. 路由页面的完整代码 router.js:

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      redirect: '/login'
    },
    {
      path: '/login',
      component: () => import('../components/Login.vue')
    },
    {
      path: '/home',
      component: () => import('../components/Home.vue')
    }
  ]
})

// 挂载路由导航守卫
router.beforeEach((to, from, next) => {
  // to 将要访问的路径
  // from 代表从哪个路径跳转而来的
  // next 是一个函数，表示放行
  // next() 放行  next('/login) 强制跳转到登录页
  // 如果用户访问的是登录页，直接放行
  if (to.path === '/login') return next()
  // 从sessionStorage中获取保存的token值
  const tokenStr = window.sessionStorage.getItem('token')
  // 如果token的值不存在，强制跳转到登录页
  if (!tokenStr) return next('/login')
  // 存在token，那么就放行
  next()
})

export default router