技能学习:学习使用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进行登陆的校验,实现进入页面必须登录的操作。

相关文章
|
6月前
|
JavaScript 前端开发 API
|
7月前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
303 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
6月前
|
前端开发 JavaScript 数据可视化
58K star!这个让网页动起来的JS库,前端工程师直呼真香!
Anime.js 是一款轻量级但功能强大的JavaScript动画引擎,它能够以最简单的方式为网页元素添加令人惊艳的动效。这个项目在GitHub上已经获得58,000+星标,被广泛应用于电商页面、数据可视化、游戏开发等场景。
215 8
|
7月前
|
资源调度 JavaScript 前端开发
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
5818 24
|
8月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
197 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
9月前
|
Dart 前端开发 架构师
【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
434 26
|
9月前
|
JavaScript 前端开发 jenkins
抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
本文探讨了在不依赖Node和VSCode的情况下,仅使用记事本和浏览器开发一个完整的Vue3前端项目的方法。通过CDN引入Vue、Vue Router、Element-UI等库,直接编写HTML文件实现页面功能,展示了前端开发的本质是生成HTML。虽然日常开发离不开现代工具,但掌握这种基础方法有助于快速实现想法或应对特殊环境限制。文章还介绍了如何用Node简单部署HTML文件到服务器,提供了一种高效、轻量的开发思路。
173 10
|
11月前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
163 3
springboot解决js前端跨域问题,javascript跨域问题解决
|
前端开发 JavaScript 关系型数据库
基于 Vue2.0 + Nest.js 全栈开发的后台应用
Vue2 Admin 是一个基于 Vue2 和 Ant Design Pro 开发的前端项目,配合 Nest.js 构建的后端,提供了一个完整的全栈后台应用解决方案。该项目支持动态国际化、用户权限管理、操作日志记录等功能,适合全栈开发者学习参考。线上预览地址:https://vue2.baiwumm.com/,用户名:Admin,密码:abc123456。
180 0
基于 Vue2.0 + Nest.js 全栈开发的后台应用
|
12月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
876 14