javascript --- > [express+ vue2.x + elementUI]登陆的流程梳理

说明

涉及到以下知识点:

• 登陆的具体流程
• express、vue2.x、elementUI、axios、jwt、assert 登陆方面的API使用
• 中间件的使用
• 前后端通过http状态码,进行响应的操作(这里主要是401)
• 密码验证(bcrypt的hashSync方法对明文密码进行加密,compareSync方法对加密的密码进行验证)
• token的使用(后端jwt.sign生成token, 前端使用浏览器缓存存储token,后端验证token)

登录

界面

使用Vue2.x + elementUI实现的登录界面

<template>
    <div class="login-container">
        <el-card header="请先登录" class="login-card">
            <!-- @submit.native.prevent阻止表单的默认提交行为,并将提交的事件处理函数,绑定到login上 -->
            <el-form @submit.native.prevent="login">
                <el-form-item label="用户名">
                    <el-input v-model="model.username"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input type="password" v-model="model.password"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" native-type="submit">登录</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

逻辑

• 前端传入用户名和密码

<template>
    <el-form @submit.native.prevent="login">
        <el-form-item label="用户名">
            <el-input v-model="model.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
            <el-input v-model="model.password" type="password"></el-input>
        </el-form-item>
    </el-form>
</template>
<script