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

简介: 上篇文章使用了bcryptjs对密码进行了加密,既然加密后的密码是不可逆的,那么保存后的密文又如何被验证识别呢?仍然使用bcryptjs,其中的compareSync来比较密码和数据库的密文。

上篇文章使用了bcryptjs对密码进行了加密,既然加密后的密码是不可逆的,那么保存后的密文又如何被验证识别呢?
仍然使用bcryptjs,其中的compareSync来比较密码和数据库的密文。

1.制作登陆页面

登陆页面不使用Main.vue带有左侧菜单的布局,所以与Main.vue的路由链接“/”同级。
在这里插入图片描述
Login.vue:

<template>
    <div class="login-container">
        <el-card header="管理员登录" class="login-card">
            <!-- 监听表单的submit事件,native.prevent监听原生表单事件跳转接口并且阻止页面跳转 -->
            <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-item>
                    <el-button type="primary" native-type="submit">登录</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        return {
            model: {}
        }
    },
    methods: {
        async login() {
            const res = await this.$http.post('login')
            console.log(res)
        }
    }
}
</script>

<style>
.login-card{
    width: 35rem;
    margin: 6rem auto;
}
</style>
2.写登录接口

在这里插入图片描述
server/routes/admin/index.js:

// 登录接口

    app.post('/admin/api/login', async(req, res) => {
        // 将接收到的username和password解构
        const { username, password } = req.body

        // 1.根据用户名找用户
            // 如果用户名为空
        if(!username){
            return res.status(422).send({
                message: '请输入用户名'
            })
        }
            // 引入model模型
        const Admin = require('../../models/Admin')
            // 利用模型查找指定用户,同时将密码连带查询出来
        const user = await Admin.findOne({
            username: username
        }).select('+password')
        if(!user){
            // 如果没有该用户,返回一个非500\404的错误码,同时发送查询结果不存在的信息
            return res.status(422).send({
                message: '用户不存在'
            })
        }

        // 2.校验密码
        if(!password){
            return res.status(422).send({
                message: '请输入密码'
            })
        }
            // 引入bcryptjs,用来比较密码和密文是否匹配(前端传入的password,后端查询数据库的password)
        const isValid = require('bcryptjs').compareSync(password, user.password)
            // 如果密码与密文不匹配
        if(!isValid){
            return res.status(422).send({
                message: '密码错误'
            })
        }
        
        // 3.返回token
            // 如果密码与密文匹配
        return ..
    })

测试:
在这里插入图片描述

3.全局监听响应的拦截,将错误时发送的message在页面显示

admin/src/http.js:

// 全局进行响应的拦截(axios内的响应拦截方法)
http.interceptors.response.use(res => {
    return res
},err => {
    // 如果拦截到错误的操作,使用VUE将错误信息进行弹出展示
    // 获取错误信息console.log(err.response.data.message)
    Vue.prototype.$message({
        type: 'error',
        message: err.response.data.message
    })
    return Promise.reject(err)
})

在这里插入图片描述
在这里插入图片描述

4.使用jsonwebtoken创建token值进行登录

密码验证成功后,我们就向admin端发送一个token值,像session一样挂载到网页,如果有token值就可以进入admin页面,没有就需要进行登录。
(1)使用token

cd server
npm i jsonwebtoken

在这里插入图片描述
在server/routes/admin/index.js登录接口第三步,生成密钥处编写:
在这里插入图片描述
server/index.js全局定义密钥:
在这里插入图片描述
此时,点击登录token值就可以生成,并发送到web端:
在这里插入图片描述
(2)存储token并跳转admin管理页面
Login.vue编辑login接口回调:
在这里插入图片描述
测试:
在这里插入图片描述
登陆成功。
且token值已保存:
在这里插入图片描述

5.token验证

此时我们已经完成了管理员登录功能的实现,但是就算不登陆也可以访问admin端页面,下篇文章我们使用token进行登陆的校验,实现进入页面必须登录的操作。

相关文章
|
3月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
4天前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
24 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
25天前
|
JavaScript 前端开发 jenkins
抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
本文探讨了在不依赖Node和VSCode的情况下,仅使用记事本和浏览器开发一个完整的Vue3前端项目的方法。通过CDN引入Vue、Vue Router、Element-UI等库,直接编写HTML文件实现页面功能,展示了前端开发的本质是生成HTML。虽然日常开发离不开现代工具,但掌握这种基础方法有助于快速实现想法或应对特殊环境限制。文章还介绍了如何用Node简单部署HTML文件到服务器,提供了一种高效、轻量的开发思路。
53 10
|
3月前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
3月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
87 5
|
3月前
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
122 1
|
3月前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
73 4
|
3月前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
594 1
|
缓存 JavaScript 前端开发
前端—vue学习
一. vue.js简介
197 0
|
2月前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
145 1

热门文章

最新文章