【前端】Vue+Element UI案例：通用后台管理系统-登陆页面功能：登录权限跳转、路由守卫、退出

参考视频： VUE项目，VUE项目实战，vue后台管理系统，前端面试，前端面试项目

目标

在Login页面添加功能：

• 点击提交后验证：
• 若密码正确则进入Home页面
• 否则弹窗提示密码错误
• 用Cookie保存token，实现页面间的通信
• 若没有登录（没有Cookie），则在Home页面跳转回Login
• Header组件的“退出”按钮实现Cookie的删除

代码

0.准备：Cookie安装、后端验证的接口、mock和api

依赖：

"js-cookie": "^3.0.1"
1

Cookie的安装：

npm i js-cookie@3.0.1
1

后端接口：permission.js.

后端接口的mock拦截：注意，这种会修改数据的一般都是post请求。

// 登录权限
Mock.mock(/api\/permission\/getMenu/,'post',permission.getMenu)
1
2

api.index:

// 登录权限
export const getMenu = (data) => {
    return http.post('/permission/getMenu',data)
}
1
2
3
4

0-1：登录页面的帐号密码

由permission.js得知，管理员：

username:admin,
password:admin
1
2

用户：

username:xiaoxiao,
password:xiaoxiao
1
2

1.表单提交功能：若成功则跳转并保存cookie

绑定事件：

<el-form-item>
   <el-button @click="submit" type="primary" style="margin-left:30px;margin-top:10px">提交el-button>
el-form-item>
1
2
3

submit：传入表单数据，看一下控制台根据登陆页面的输入而输出的数据。

submit() {
    // 表单的校验
    this.$refs.form.validate((valid) => {
        if (valid) {
            // 传入表单数据
            getMenu(this.login).then((data) => {
                console.log(data);
            })
        }
    })
}
1
2
3
4
5
6
7
8
9
10
11

若验证正确：

验证失败：

红框内是验证相关的数据。data.data.code是20000的时候说明验证成功，否则失败。

点击提交后的逻辑：

• 若验证成功，则保存后端返回的token，跳转至Home
• 否则弹窗显示失败

submit() {
    // 表单的校验
    this.$refs.form.validate((valid) => {
        if (valid) {
            // 传入表单数据
            getMenu(this.login).then((data) => {
                // console.log(data);
                if(data.data.code===20000){
                    // 记录cookie
                    Cookie.set('token',data.data.data.token)
                    // 跳转到首页
                    this.$router.push('/home')
                }else{
                    // 验证失败的弹窗
                    this.$message.error(data.data.data.message);
                }
            })
        }
    })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

弹窗：

效果：

验证成功 ：跳转到了Home页面并且保存了Cookie。

验证失败：

2.导航守卫

到这里，我们已经完成了登陆页面的跳转功能。但是如果我们删除了cookie，在Home页面刷新，并不会退出Home页面。

因此我们要添加导航守卫。
文档在这：注意，本项目的技术栈是Vue2，对应的Vue-router3。

导航守卫相关逻辑：

• 若没有token且不在login页面则跳转至login（防止跳转的死循环）
• 若有token且在login页面则跳转至Home：说明已经保存了帐号
• 都不是，就做直接next

// 路由守卫:全局前置导航守卫
router.beforeEach((to, from, next) => {
    // 获取token
    const token = Cookie.get('token')

    if (!token && to.name !== 'login') {
        next({ name: 'login' })
    } else if (token && to.name === 'login') {
        next({ name: 'home' })
    } else {
        next()
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13

如果不知道为什么要这么写的话，要看文档！！

3.退出删除token

退出相关的组件在CommonHeader中：

我们尝试在item中绑定点击事件，发现不会触发，原因是：要这样绑定事件才行，不能直接@click=

文档中的methods：command是参数。

handleCommand(command) {
 	this.$message('click on item ' + command);
}
1
2
3

我们的代码：在html上绑定command：

<el-dropdown @command="handleClick">
    <span class="el-dropdown-link">
        <img class="user" src="../assets/images/user.png" alt="">
    span>
    <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>个人信息el-dropdown-item>
        <el-dropdown-item command="logout">退出el-dropdown-item>
    el-dropdown-menu>
el-dropdown>
1
2
3
4
5
6
7
8
9

methods：handleClick

handleClick(command) {
    if (command === 'logout') {
        Cookie.remove('token')
        this.$router.push('/login')
    }
}
1
2
3
4
5
6

总代码

本篇修改或新建的文件

• permission.js：后端接口
• api的index：定义后端接口
• mock：定义后端拦截
• CommonHeader：添加退出事件
• router的index：添加导航守卫
• Login：完善登陆页面的功能

0-permission.js

import Mock from 'mockjs'
export default {
    getMenu: config => {
        const { username, password } = JSON.parse(config.body)
        // 先判断用户是否存在
        // 判断账号和密码是否对应
        if (username === 'admin' && password === 'admin') {
            return {
                code: 20000,
                data: {
                    menu: [
                        {
                            path: '/home',
                            name: 'home',
                            label: '首页',
                            icon: 's-home',
                            url: 'Home.vue'
                        },
                        {
                            path: '/mall',
                            name: 'mall',
                            label: '商品管理',
                            icon: 'video-play',
                            url: 'Mall.vue'
                        },
                        {
                            path: '/user',
                            name: 'user',
                            label: '用户管理',
                            icon: 'user',
                            url: 'User.vue'
                        },
                        {
                            label: '其他',
                            icon: 'location',
                            children: [
                                {
                                    path: '/page1',
                                    name: 'page1',
                                    label: '页面1',
                                    icon: 'setting',
                                    url: 'PageOne.vue'
                                },
                                {
                                    path: '/page2',
                                    name: 'page2',
                                    label: '页面2',
                                    icon: 'setting',
                                    url: 'PageTwo.vue'
                                }
                            ]
                        }
                    ],
                    token: Mock.Random.guid(),
                    message: '获取成功'
                }
            }
        } else if (username === 'xiaoxiao' && password === 'xiaoxiao') {
            return {
                code: 20000,
                data: {
                    menu: [
                        {
                            path: '/home',
                            name: 'home',
                            label: '首页',
                            icon: 's-home',
                            url: 'Home.vue'
                        },
                        {
                            path: '/video',
                            name: 'video',
                            label: '商品管理',
                            icon: 'video-play',
                            url: 'Mall.vue'
                        }
                    ],
                    token: Mock.Random.guid(),
                    message: '获取成功'
                }
            }
        } else {
            return {
                code: -999,
                data: {
                    message: '密码错误'
                }
            }
        }

    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92

Login.vue

<template>
    <el-form ref="form" class="login_container" :model="login" status-icon :rules="rules" label-width="70px">
        
        <h3 class="login_title">用户登录h3>
        
        <el-form-item label="用户名" prop="username">
            <el-input v-model="login.username" autocomplete="off">el-input>
        el-form-item>

        <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="login.password" autocomplete="off">el-input>
        el-form-item>

        <el-form-item>
            <el-button @click="submit" type="primary" style="margin-left:30px;margin-top:10px">提交el-button>
        el-form-item>
    el-form>
template>

<script>
import Cookie from 'js-cookie'
import { getMenu } from '../api/index'
export default {
    data() {
        return {
            // 登陆数据
            login: {
                username: '',
                password: ''
            },
            // 校验规则
            rules: {
                username: [{ required: 'true', message: '请输入用户名', trigger: 'blur' }],
                password: [{ required: 'true', message: '请输入用户名', trigger: 'blur' }]
            }
        }
    },
    methods: {
        submit() {
            // 表单的校验
            this.$refs.form.validate((valid) => {
                if (valid) {
                    // 传入表单数据
                    getMenu(this.login).then((data) => {
                        console.log(data);
                        if(data.data.code===20000){
                            // 记录cookie
                            Cookie.set('token',data.data.data.token)
                            // 跳转到首页
                            this.$router.push('/home')
                        }else{
                            // 验证失败的弹窗
                            this.$message.error(data.data.data.message);
                        }
                    })
                }
            })
        }
    }
}
script>

<style lang="less" scoped>
.login_container {
    width: 350px;
    border: 1px solid #eaeaea;

    // 居中
    margin: 180px auto;

    padding: 35px 35px 15px 35px;

    // 让padding在width里面
    box-sizing: border-box;

    border-radius: 15px;
    background-color: #fff;
    box-shadow: 0 0 25px #cac6c6;

    .login_title {
        color: #505458;
        // 左右居中
        text-align: center;
        margin-bottom: 40px;
    }

    .el-input {
        width: 198px;
    }
}
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91