Vue + Element UI（四）：优化登录流程

柔情只为你懂 2022-09-11 01:11 242阅读 0赞

### 文章目录 ###

*   *  完善登录流程
     *   *  1、丰富登录界面
         *  2、修改接口
         *  3、修改 mock 接口
         *  4、添加导航守卫
         *  5、修改主页界面
         *  6、嵌套路由

--------------------

## 完善登录流程 ##

### 1、丰富登录界面 ###

（1）从 Element 指南中选择组件模板丰富登录界面，放置一个登录界面表单，包含账号密码输入框和登录重置按钮。

**Login.vue**

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_20_color_FFFFFF_t_70_g_se_x_16]

（2）稍微调整一下界面样式

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_20_color_FFFFFF_t_70_g_se_x_16 1]

（3）添加页面组件显示规则和操作响应，其中登录成功后，把登录用户信息存储到本地会话，用于配置路由跳转目标。

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_20_color_FFFFFF_t_70_g_se_x_16 2]

（4）最后效果如下图所示。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_20_color_FFFFFF_t_70_g_se_x_16 3]

### 2、修改接口 ###

修改 http/interface.js，把请求类型改为 post，并传入 data 参数。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_20_color_FFFFFF_t_70_g_se_x_16 4]

### 3、修改 mock 接口 ###

修改 mock/modules/login.js，把请求类型改为 post。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_19_color_FFFFFF_t_70_g_se_x_16]

### 4、添加导航守卫 ###

在 router/index.js 中添加导航守卫，如下图所示，根据用户登录会话记录，路由到主页或登录界面。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_20_color_FFFFFF_t_70_g_se_x_16 5]

### 5、修改主页界面 ###

（1）向 Home.vue 添加组件，构建主界面。

<template>
        <el-row class="container">
            <el-col :span="24" class="header">
                <el-col :span="5" class="logo" :class="isCollapse?'logo-collapse-width':'logo-width'">
            <img :src="this.logo" /> { { isCollapse?sysName:sysName}}
                </el-col>
                <el-col :span="1">
                    <div class="tools" @click.prevent="collapse">
                        <i class="el-icon-menu"></i>
                    </div>
                        
                </el-col>
                <el-col :span="13">
                    <div class="hearNavBar">
              <el-menu :default-active="activeIndex" class="el-menu-demo" background-color="#4b5f6e" text-color="#fff"
                  active-text-color="#ffd04b" mode="horizontal" @select="handleSelectHearNavBar">
                <el-menu-item index="1">首页</el-menu-item>
                <el-menu-item index="2">消息中心</el-menu-item>
                <el-menu-item index="3">订单管理</el-menu-item>
              </el-menu>
                    </div>
                </el-col>
                <el-col :span="5" class="userinfo">
                    <el-dropdown trigger="hover">
                        <span class="el-dropdown-link userinfo-inner"><img :src="this.userAvatar" /> { { username}}</span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>我的消息</el-dropdown-item>
                            <el-dropdown-item>设置</el-dropdown-item>
                            <el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </el-col>
            </el-col>
            <el-col :span="24" class="main">
                <aside class="aside">
                    
            <el-menu default-active="1-3" class="el-menu-vertical-demo" @open="handleopen" @close="handleclose" @select="handleselect" :collapse="isCollapse">
              <el-submenu index="1">
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span slot="title">导航一</span>
                </template>
                <el-menu-item index="1-1">选项1</el-menu-item>
                <el-menu-item index="1-2">选项2</el-menu-item>
                <el-menu-item index="1-3">选项3</el-menu-item>
              </el-submenu>
              <el-menu-item index="2">
                <i class="el-icon-menu"></i>
                <span slot="title">导航二</span>
              </el-menu-item>
              <el-menu-item index="3" disabled>
                <i class="el-icon-document"></i>
                <span slot="title">导航三</span>
              </el-menu-item>
              <el-menu-item index="4">
                <i class="el-icon-setting"></i>
                <span slot="title">导航四</span>
              </el-menu-item>
            </el-menu>
                </aside>
                <section class="content-container">
                    <div class="grid-content bg-purple-light">
                        <el-col :span="24" class="breadcrumb-container">
                            <el-breadcrumb separator="/" class="breadcrumb-inner">
                                <el-breadcrumb-item v-for="item in $route.matched" :key="item.path">
                                    { {  item.name }}
                                </el-breadcrumb-item>
                            </el-breadcrumb>
                        </el-col>
                        <el-col :span="24" class="content-wrapper">
                            <transition name="fade" mode="out-in">
                                <router-view></router-view>
                            </transition>
                        </el-col>
                    </div>
                </section>
            </el-col>
        </el-row>
    </template>

（2）处理页面事件和页面数据显示，主要是两个事件和在 mounted 函数内获取页面数据。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_12_color_FFFFFF_t_70_g_se_x_16]  
（3）修饰调整 css 样式，构建界面，样式太多，就不贴了，直接看源码 ，调整完效果如下图所示。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_20_color_FFFFFF_t_70_g_se_x_16 6]

### 6、嵌套路由 ###

（1）在 views 目录下新建 Main、User、Menu 页面，用于菜单路由，内容随便显示点什么就可以。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_9_color_FFFFFF_t_70_g_se_x_16]  
（2）在 router/index.js 文件中添加子路由，分别指向子页面。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_20_color_FFFFFF_t_70_g_se_x_16 7]  
（3）在 views/Home.vue 页面对应的导航菜单中添加点击事件，路由到对应的子页面。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_20_color_FFFFFF_t_70_g_se_x_16 8]  
（6）登录之后，点击用户管理，路由到用户管理界面；点击菜单管理，路由到菜单管理界面。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_20_color_FFFFFF_t_70_g_se_x_16 9]  
（7）这里发现点击导航菜单之后，菜单就不能点击了，经查看是导航页面坐标样式问题，把用户管理等页面的样式去掉就好了。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_14_color_FFFFFF_t_70_g_se_x_16]  
（8）同理添加机构管理、角色管理、日志管理的菜单之后，效果如下。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_20_color_FFFFFF_t_70_g_se_x_16 10]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/34b28bce51df4b5d8bf16c1887c8103a.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/ed86a8c8eeeb48f89531ed350b271a6e.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220829/c96b0ef14adc41c386b88ce59278ae14.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_20_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220829/e7b6534d97a94a6aa4c2b1a4240b8fa6.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_20_color_FFFFFF_t_70_g_se_x_16 4]: /images/20220829/f7b3855b763b49a3b41eb5f853b0c7b1.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_19_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/c1d82d0f8a754a6b91c4aaae27223508.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_20_color_FFFFFF_t_70_g_se_x_16 5]: /images/20220829/fe90ea133c554fc58ee94c3f3ebd244c.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_12_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/23496ecd0ecb4200a3b70190e7833f53.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_20_color_FFFFFF_t_70_g_se_x_16 6]: /images/20220829/a2554e28490c4cfc933ec9ff397974c9.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_9_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/d5a3380f70c34fd5a402fcd5e4f70299.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_20_color_FFFFFF_t_70_g_se_x_16 7]: /images/20220829/962953b1728746c09f1fb2d3c3d09307.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_20_color_FFFFFF_t_70_g_se_x_16 8]: /images/20220829/e390d174b8634877971dcf80d8f1cc3e.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_20_color_FFFFFF_t_70_g_se_x_16 9]: /images/20220829/949a8078d534421fb6a7a5716eaffd1e.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_14_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/aa60b427767c40f687f5e87210d62276.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_20_color_FFFFFF_t_70_g_se_x_16 10]: /images/20220829/89fd92e72b02455e9f70667c143133b0.png