大家好，欢迎来到IT知识分享网。

1. 管理员账号管理（bcrypt）
2. 登录页面
3. 登录接口（jwt,jsonwebtoken,）
4. 服务端登录校验
5. 客户端路由限制(beforeEach,meta)

管理员账号管理

const mongoose = require("mongoose") const schema = new mongoose.Schema({ username: {type: String}, password:{type:String, select:false, set(val){ return require('bcrypt').hashSync(val,10) }} }) module.exports = mongoose.model('AdminUser',schema) 

数据模型说明一切,password用bcrypt 进行10位hash不可逆加密,password不可回显查询.

登陆页面login

<template> <div class="login-container"> <el-card header="请先登陆" class="login-card"> <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 type="password" show-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> </el-card> </div> </template> <script> // @ is an alias to /src export default { data(){ return{ model:{} } }, methods:{ async login(){ const res = await this.$http.post('login',this.model) // sessionStorage.token = res.data.token localStorage.token = res.data.token this.$router.push('/') // console.log(res.data); this.$message({ type:'sucess', message:'登录成功' }) } } } </script> <style> .login-card{ width: 25rem; margin: 5rem auto; } </style>

登陆接口

// \server\index.js // 添加公共配置token加密密钥 app.set('secret','moke')

// server\routes\admin\index.js app.post('/admin/api/login', async(req,res) =>{ const{username,password} = req.body // 1.根据用户名找用户 const AdminUser = require('../../models/AdminUser') const user = await AdminUser.findOne({username}).select('+password') if(!user){ return res.status(422).send({ message:'用户不存在' }) } // 2.校验密码 const isValid = require('bcrypt').compareSync(password,user.password) if(!isValid){ return res.status(422).send({ message:'密码错误' }) } // 3.返回token // cd server // npm i jsonwebtoken const jwt = require('jsonwebtoken') // app.get('secret')获取token加密密钥 const token = jwt.sign({id: user._id}, app.get('secret')) res.send({token}) }) }

服务端登录校验

// \server> npm i http-assert // server\routes\admin\index.js const AdminUser = require('../../models/AdminUser') // admin route module.exports = app => { // 导入express const express = require('express') const jwt = require('jsonwebtoken') const assert = require('http-assert') // const router = express.Router({ // 合并路由参数配置，因为在app.use中使用了变量resource // mergeParams:true }) // 引入Category数据模型 //const Category = require("../../models/Category") // post请求实现,增 router.post('/',async(req,res)=>{ // 创建模型 const model = await req.Model.create(req.body) res.send(model) }) // delete 删 router.delete('/:id',async(req,res)=>{ // 创建模型 const model = await req.Model.findByIdAndDelete(req.params.id,req.body) res.send({ success:true }) }) // put 改 router.put('/:id',async(req,res)=>{ // 创建模型 const model = await req.Model.findByIdAndUpdate(req.params.id,req.body) res.send(model) }) // console.log(router) // get 查 router.get('/',async(req,res)=>{ // return res.send(modelName) const queryOptions = {} if(req.Model.modelName === 'Category'){ queryOptions.populate = 'parent' } const items = await req.Model.find().setOptions(queryOptions) res.send(items) }) // get 获取对应ID内容 router.get('/:id',async(req,res)=>{ // 创建模型 const model = await req.Model.findById(req.params.id) res.send(model) }) // 通用接口URL变更 // 登录中间价 const authMiddleware = require('../../middleware/auth') const resourceMiddleware = require('../../middleware/resource') app.use('/admin/api/rest/:resource',authMiddleware(),resourceMiddleware(),router) const multer = require('multer') const upload = multer({ dest:__dirname + '/../../uploads'}) app.post('/admin/api/upload',authMiddleware(),upload.single('file'),async(req,res)=>{ const file = req.file file.url = `http://localhost:3000/uploads/${file.filename}` res.send(file) }) app.post('/admin/api/login', async(req,res) =>{ const{username,password} = req.body // 1.根据用户名找用户 const user = await AdminUser.findOne({username}).select('+password') assert(user,422,'用户不存在') // 2.校验密码 const isValid = require('bcrypt').compareSync(password,user.password) assert(isValid,422,'密码错误') // 3.返回token // cd server // npm i jsonwebtoken const token = jwt.sign({id: user._id}, app.get('secret')) res.send({token}) }) // assert 错误处理 app.use(async(err,req,res,next)=>{ // console.log(err.status); res.status(err.status || 500).send({ message: err.message }) }) }

中间价 authMiddleware

// server\middleware\auth.js module.exports = option => { const jwt = require('jsonwebtoken') const assert = require('http-assert') const AdminUser = require('../models/AdminUser') return async(req,res,next)=>{ const token = String(req.headers.authorization || '').split(' ').pop() assert(token, 401, '请提供jwt token') const {id} = jwt.verify(token,req.app.get('secret')) assert(id, 401,'无效的jwt token') req.user = await AdminUser.findById(id) assert(req.user,401,'请先登录') // console.log(req.user); await next() } }

中间价 resourceMiddleware

// server\middleware\resource.js module.exports = option=>{ return async(req,res,next) =>{ // 类名单复数转换 const modelName =require("inflection").classify(req.params.resource) req.Model = require(`../models/${modelName}`) next() } }

前端token处理

// admin\src\http.js // token 登录校验 request拦截 http.interceptors.request.use(function(config){ if(localStorage.token){ config.headers.Authorization = 'Bearer ' + localStorage.token } return config; },function(error){ return Promise.reject(error) }) // response异常拦截 http.interceptors.response.use(res =>{ return res }, err =>{ if(err.response.data.message){ Vue.prototype.$message({ type: 'error', message: err.response.data.message }) // 我登录信息返回 if(err.response.status === 401){ router.push('/login') } } return Promise.reject(err) })

客户端路由限制

// meta 和 导航守卫 // admin\src\router\index.js // meta { path:'/login', name: 'login', component: Login, meta:{isPublic:true} } // 导航守卫 router.beforeEach((to,from,next)=>{ if(!to.meta.isPublic && !localStorage.token){ return next('/login') } next() })

上传文件的登录校验

// admin\src\main.js // Vue mixin 全局代码块 Vue.mixin({ methods:{ getAuthHeaders(){ return { Authorization:`Bearer ${localStorage.token || ''}` } } } }) // admin\src\views\ItemsEdit.vue // 哪里使用就在哪里调用 <el-upload class="avatar-uploader" :action="$http.defaults.baseURL + '/upload'" :headers="getAuthHeaders()" :show-file-list="false" :on-success="afterUpload"> <img v-if="model.icon" :src="model.icon" class="avatar"> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload>

目前简单的JavaScript全栈已全部完成,因目标调整,暂停JavaScript全栈方面的知识分享.

本着善始善终更新完这段学习旅程,目前代码都已经可正常运行,有需要源码的朋友们联系我!

下一步将进入二进制方面的知识学习也会分享出来!

下一步学习书籍

《有趣的二进制：软件安全与逆向分析 [日] 爱甲健二著》

《RE4B(Reverse Engineering for Beginner)》