VUE3.0学习系列随笔（八）：实现导航守卫模式的个人登录界面

VUE3.0学习系列随笔（八）：实现导航守卫模式的个人登录界面

本文所使用到的VUE3.0依赖：

链接路径管理（vue-router）：4.0版本
Vue状态管理（vuex）：4.0版本
前端UI渲染管理（element-plus）：1.0.2-beta.30版本

这些依赖可以通过VUE3.0 UI管理界面进行安装，安装方式见博客：https://blog.csdn.net/qq_26666947/article/details/113105946

演示效果

1、登录界面

登录界面一切从简，效果为：

登录界面代码为：

<template>
  <div>
    <el-form ref="loginForm" :model="loginForm" label-width="60px" class="login-box">
      <h3 class="login-title">欢迎登录</h3>
      <el-form-item label="账号" prop="uName">
        <el-input type="text" placeholder="请输入账号" v-model="loginForm.uName"/>
      </el-form-item>
      <el-form-item label="密码" prop="uPwd">
        <el-input type="password" placeholder="请输入密码" v-model="loginForm.uPwd"/>
      </el-form-item>
      <el-form-item>
        <el-space wrap :size="60">
          <el-button type="primary" v-on:click="onSubmit()">登录</el-button>
          <el-button type="warning" v-on:click="onReset()">重置</el-button>
        </el-space>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { ElMessage } from 'element-plus'
export default {
  name: 'Test',
  data () {
    return {
      loginBg: 'url(' + require('../assets/login.jpeg') + ')',
      loginForm: {
        uName: '',
        uPwd: ''
      }
    }
  },
  methods: {
    // 登录提交
    onSubmit () {
      console.log(this.loginForm.uName + '--' + this.loginForm.uPwd)
      this.$store.commit('setUName', this.loginForm.uName)
      ElMessage({
        showClose: true,
        message: '恭喜你，登录成功',
        type: 'success'
      })
      this.$router.push('/home')
    },
    // 重置输入
    onReset () {
      this.loginForm.uName = ''
      this.loginForm.uPwd = ''
    }
  },
  mounted () {
    document.body.style.backgroundSize = '100%'
    document.body.style.backgroundImage = this.loginBg
  },
  beforeUnmount () {
    document.body.style.backgroundImage = ''
  }
}
</script>

<style scoped>
  .login-box {
    border: 1px solid #DCDFE6;
    width: 350px;
    margin: 120px auto;
    padding: 35px 35px 15px 35px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    box-shadow: 0px 0 25px black;
    background-color: white;
  }
  .login-title {
    text-align: center;
    margin: 0 auto 30px auto;
    color: #303133;
  }
  /deep/ .el-form-item__label {
    font-size: 18px;
    color: black;
  }
</style>

2、增加导航守卫模式

（1）使用Vuex状态管理存储登陆之后的用户名

如果工程目录结构中不存在store文件夹，需添加store文件夹，并新建index.js存储用户信息，index.js代码为：

import { createStore } from 'vuex'

export default createStore({
  // 记录信息变量
  state: {
    uName: ''
  },
  // 设置用户名称
  mutations: {
    setUName (state, uName) {
      state.uName = uName
    }
  },
  // 获取用户名称
  getters: {
    getUName: state => state.uName
  }
})

在Vue文件中，设置用户信息代码为：this.$store.commit('setUName', this.loginForm.uName)，获取用户信息：this.$store.getters.getUName，在登录提交函数中增加this.$store.commit('setUName', this.loginForm.uName)，即可将用户信息存储在vuex中。

（2）在router中判断用户是否登陆，增加守卫模式

守卫模式，主要是先判断当前url是否需要验证，如果需要，再判断用户信息是否记录到vuex中，如果已记录则不跳转，如果没有记录，则需要登录。

// 守卫模式
router.beforeEach(function (to, from, next) {
  const uName = store.getters.getUName
  // 判断当前url是否要求验证
  if (to.matched.some(r => r.meta.requiresAuth)) {
    // 判断用户是否登陆，以及是否记录用户信息
    if (uName === '') {
      // 跳转到登录界面
      next('/login')
    } else {
      // 保留在当前url
      next()
    }
  } else {
    next()
  }
})

并且需要在必须登录验证的url路由增加验证标志位，比如：

{
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue'),
    meta: {
      requiresAuth: true
    }
  }

完整资源地址为：https://download.csdn.net/download/qq_26666947/14935406