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

忘是亡心i 2023-01-11 09:22 108阅读 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][https_blog.csdn.net_qq_26666947_article_details_113105946]

#### 演示效果 ####

![在这里插入图片描述][20210126201628235.gif]

#### 1、登录界面 ####

登录界面一切从简，效果为：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70]  
登录界面代码为：

<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][https_download.csdn.net_download_qq_26666947_14935406]

[https_blog.csdn.net_qq_26666947_article_details_113105946]: https://blog.csdn.net/qq_26666947/article/details/113105946
[20210126201628235.gif]: /images/20221119/a5688d363f8e4549807e9178fb901d0d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210126195419477.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3,size_16,color_FFFFFF,t_70
[https_download.csdn.net_download_qq_26666947_14935406]: https://download.csdn.net/download/qq_26666947/14935406