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

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

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

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)隐藏密码数据
既然我们对密码进行了加密,密码的显示对我们就没什么用处了。但是我们仍然要保留修改密码的方法。此时我们将密码数据隐藏。
在这里插入图片描述
刷新之后密码就不会被查询出来了。
在这里插入图片描述

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

相关文章
|
1天前
|
JavaScript Java 测试技术
智慧旅游平台开发微信小程序+springboot+vue.js附带文章和源代码设计说明文档ppt
智慧旅游平台开发微信小程序+springboot+vue.js附带文章和源代码设计说明文档ppt
7 0
|
6天前
|
IDE JavaScript 开发工具
Auto.js 开发入门
Auto.js 开发入门
|
10天前
|
监控 安全 NoSQL
采用java+springboot+vue.js+uniapp开发的一整套云MES系统源码 MES制造管理系统源码
MES系统是一套具备实时管理能力,建立一个全面的、集成的、稳定的制造物流质量控制体系;对生产线、工艺、人员、品质、效率等多方位的监控、分析、改进,满足精细化、透明化、自动化、实时化、数据化、一体化管理,实现企业柔性化制造管理。
39 3
|
12天前
|
缓存 监控 JavaScript
探讨优化Vue应用性能和加载速度的策略
【5月更文挑战第17天】本文探讨了优化Vue应用性能和加载速度的策略:1) 精简代码和组件拆分以减少冗余;2) 使用计算属性和侦听器、懒加载、预加载和预获取优化路由;3) 数据懒加载和防抖节流处理高频事件;4) 图片压缩和选择合适格式,使用CDN加速资源加载;5) 利用浏览器缓存和组件缓存提高效率;6) 使用Vue Devtools和性能分析工具监控及调试。通过这些方法,可提升用户在复杂应用中的体验。
32 0
|
12天前
|
JavaScript 前端开发
vue(1),小白看完都会了
vue(1),小白看完都会了
|
2天前
|
JavaScript 前端开发 C++
【Vue】Vue快速入门、Vue常用指令、Vue的生命周期
【Vue】Vue快速入门、Vue常用指令、Vue的生命周期
12 2
|
4天前
|
存储 缓存 JavaScript
谈谈你对vue的了解
谈谈你对vue的了解
14 3
|
4天前
|
JavaScript API
Vue axjx 跨域请求
Vue应用中解决跨域问题可通过配置代理服务器。方法一是设置`devServer.proxy`到目标服务器端口,如`http://localhost:3000`,然后使用axios发送请求。方法二是为多个代理配置,如`/api`和`/api2`,分别指向不同端口,利用`pathRewrite`重写路径。请求时需加上相应前缀,如`/api/index`。
13 1
|
4天前
|
JavaScript 前端开发 Java
JavaSE精选-Vue
JavaSE精选-Vue
7 1
|
5天前
|
JavaScript
Vue父子组件传值
<!-- 父组件向子组件传地值 -->
15 2