技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-12-1.管理员模块

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

1.管理员模块的实现

我们使用了CRUD通用接口,我们不需要对常用接口进行编辑,所以每个数据表的模型是我们开发一个模块时的第一步。模型Admin.js,只包括用户名密码即可:
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-12-1.管理员模块
主页面Main.vue添加导航:
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-12-1.管理员模块
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>

为组件添加路由:
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-12-1.管理员模块
测试一下,
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-12-1.管理员模块
没问题。

2.用户的密码安全

虽然我们的密码输入框使用了password加密,将密码转化为*号,但是想要查看用户密码还是很简单的。
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-12-1.管理员模块
在任何登录功能中,密码不仅关系到用户的信息安全,还涉及到了用户的隐私。部分用户为了配合现阶段的密码强度(字母、数字、符号组合等),都有各自固定的密码格式,也就是说为了方便记忆,一个用户在各个平台使用的大多数账号都是相同的密码。所以本着程序工作者的职业操守,我们有义务为使用我们产品的用户进行密码转码操作,从而保护用户的隐私。
(1)修改管理员数据模型
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-12-1.管理员模块
加密过程不在前端,而是将密码传输到服务端,在服务端对密码进行重新散列编码,保存到数据库的就是重新编码后的密码。
(2)使用bcryptjs加密包

cd server
npm i bcryptjs

技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-12-1.管理员模块
安装成功,引入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)

保存密码测试,再打开:
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-12-1.管理员模块
已经是加密格式,且不可逆。
(3)bcryptjs加密的优势
我们熟知的md5加密只是将密码按规律转码成另一种密码形式,是可以进行逆向破解的。
但是bcryptjs的加密方式每次生成的编码是不同的,所以就算我们看到了编码,也不可能按照编码的规律反向推断出用户密码,所以说是绝对加密的。
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-12-1.管理员模块
可以看到现在输入123456保存后显示的编码是IY3W结尾,我们再次填写123456保存测试:
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-12-1.管理员模块
形成的编码是UraO结尾,可见同样的密码,加密后的编码也不一样,我们不管怎样都是无法查询到用户密码的。
(4)隐藏密码数据
既然我们对密码进行了加密,密码的显示对我们就没什么用处了。但是我们仍然要保留修改密码的方法。此时我们将密码数据隐藏。
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-12-1.管理员模块
刷新之后密码就不会被查询出来了。
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-12-1.管理员模块

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

上一篇:技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-13-6.卡片组件的封装


下一篇:Java电商系统商品详情页存储方案设计