网站的必备功能：用户登录。
用户登录功能是网站安全的一大重点，网站做的再好看，再完善，如果没有一个安全的管理员通道，都算不上一个成功的网站。今天起的几篇文章对用户登录进行专门学习。
本篇文章我们将管理员模块实现。

1.管理员模块的实现

我们使用了CRUD通用接口，我们不需要对常用接口进行编辑，所以每个数据表的模型是我们开发一个模块时的第一步。模型Admin.js，只包括用户名密码即可:

主页面Main.vue添加导航：

AdminSet.vue:

<template>
    <div>
        <h1>{{id ? '编辑' : '创建'}}管理员</h1>
        <el-form label-width="80px" style="margin-top:20px;" @submit.native.prevent="save">
            <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>
    </div>
</template>
<script>
export default {
    props: {
        id: {}
    },
    data(){
        return {
            model: {},
            parentOptions: [],
        }
    },
    methods: {
        async save(){
            let res
            if(this.id){
                res = await this.$http.put('rest/admins/' + this.id, this.model)
            }else{
                res = await this.$http.post('rest/admins', this.model)
            }
            console.log("en?",res)
            this.$router.push('/admins/list')
            this.$message({
                type: 'success',
                message: '保存成功'
            })
        },
        async fetch(){
            const res = await this.$http.get('rest/admins/' + this.id)
            this.model = res.data
        },
    },
    created(){
        this.id && this.fetch()
    }
}
</script>

AdminList.vue:

<template>
    <div>
        <h1>分类列表</h1>
        <el-table :data="items">
            <el-table-column prop="_id" label="ID" width="220">
            </el-table-column>
            <el-table-column prop="username" label="用户名">
            </el-table-column>
            <!-- 列表页没必要将用户密码显示 -->
            <!-- <el-table-column prop="password" label="密码">
            </el-table-column> -->
            <el-table-column
            fixed="right"
            label="操作"
            width="100">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="$router.push('/admins/edit/' + scope.row._id)">编辑</el-button>
                    <el-button @click="remove(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
export default {
    data() {
        return {
            items: []
        }
    },
    methods: {
        async fetch(){
            const res = await this.$http.get('rest/admins')
            this.items = res.data
        },
        remove(row){
            this.$confirm('是否确定要删除"' + row.name + '"的账号?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                // 要想使用await，函数必须使用async
                // await异步执行，待调用接口获取数据完成后再将值传给res，进行下一步操作
                const res = await this.$http.delete('rest/admins/' + row._id)
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                if(res.status == 200){
                    // 接口调用成功后，刷新页面
                    this.fetch()
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        }
    },
    created() {
        this.fetch()
    }
}
</script>

为组件添加路由：

测试一下，

没问题。

2.用户的密码安全

虽然我们的密码输入框使用了password加密，将密码转化为*号，但是想要查看用户密码还是很简单的。

在任何登录功能中，密码不仅关系到用户的信息安全，还涉及到了用户的隐私。部分用户为了配合现阶段的密码强度（字母、数字、符号组合等），都有各自固定的密码格式，也就是说为了方便记忆，一个用户在各个平台使用的大多数账号都是相同的密码。所以本着程序工作者的职业操守，我们有义务为使用我们产品的用户进行密码转码操作，从而保护用户的隐私。
（1）修改管理员数据模型

加密过程不在前端，而是将密码传输到服务端，在服务端对密码进行重新散列编码，保存到数据库的就是重新编码后的密码。
（2）使用bcryptjs加密包

cd server

npm i bcryptjs

安装成功，引入bcryptjs:

const mongoose = require('mongoose')

const schema = new mongoose.Schema({
    username: { type: String },
    // 默认是将接收到的password直接保存到数据库
    // 我们现在要使用函数对接收到的值进行加密操作，然后return出去到数据库
    password: { 
        type: String, 
        set(val){
            // 引入bcryptjs，hashsync同步方法传入val值，10是散列值（值越大转码强度越大但转化时间越长，一般在10-12）
            return require('bcryptjs').hashSync(val, 10)
        } 
    },
})

module.exports = mongoose.model('Admin', schema)

保存密码测试，再打开：

已经是加密格式，且不可逆。
（3）bcryptjs加密的优势
我们熟知的md5加密只是将密码按规律转码成另一种密码形式，是可以进行逆向破解的。
但是bcryptjs的加密方式每次生成的编码是不同的，所以就算我们看到了编码，也不可能按照编码的规律反向推断出用户密码，所以说是绝对加密的。

可以看到现在输入123456保存后显示的编码是IY3W结尾，我们再次填写123456保存测试：

形成的编码是UraO结尾，可见同样的密码，加密后的编码也不一样，我们不管怎样都是无法查询到用户密码的。
（4）隐藏密码数据
既然我们对密码进行了加密，密码的显示对我们就没什么用处了。但是我们仍然要保留修改密码的方法。此时我们将密码数据隐藏。

刷新之后密码就不会被查询出来了。

下篇文章我们编写登陆页面和登录接口，学习编码后的密码如何校验并登录。