网站的必备功能：用户登录。
用户登录功能是网站安全的一大重点，网站做的再好看，再完善，如果没有一个安全的管理员通道，都算不上一个成功的网站。今天起的几篇文章对用户登录进行专门学习。
本篇文章我们将管理员模块实现。
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 servernpm 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）隐藏密码数据
既然我们对密码进行了加密，密码的显示对我们就没什么用处了。但是我们仍然要保留修改密码的方法。此时我们将密码数据隐藏。
刷新之后密码就不会被查询出来了。
下篇文章我们编写登陆页面和登录接口，学习编码后的密码如何校验并登录。
