基于vs+mongodb的管理系统全栈开发

后端+前端1.1令牌身份认证[令牌]是服务端对客户端请求进行身份检查的一种技术；1.2用户登录成功后，服务端会生成令牌响应给客户端；客户端后续请求必须携带此令牌，服务端获取令牌进行身份认证判断，确定该请求为正确请求后，才响应请求数据.2.前端实现思路：2.1用户登录成功，保存服务端响应的令牌到本地2.2在AXIOS拦截器中设置令牌到授权请求头...

影子信息

692人浏览 · 2022-06-21 17:59:29

影子信息 · 2022-06-21 17:59:29 发布

管理系统全栈开发设计思路

一、组成部分

后端+前端
在这里插入图片描述

二、server后端设计

（一）、www-> app.js-> router-> model -> config

在这里插入图片描述

（二）、数据库连接失败

（1）、排除思路：mongodb数据库安装失败
在这里插入图片描述

（2）后台数据库也显示连接失败
在这里插入图片描述

解决办法见上一篇文章，重新安装一次添加链接描述

（三）、token认证，使用jwt技术，jwt技术实现token认证技术的一种技术方案

【前提】：
1.介绍：
1.1令牌身份认证[令牌]是服务端对客户端请求进行身份检查的一种技术；
1.2用户登录成功后，服务端会生成令牌响应给客户端；客户端后续请求必须携带此令牌，服务端获取令牌进行身份认证判断，确定该请求为正确请求后，才响应请求数据.
2.前端实现思路：
2.1用户登录成功，保存服务端响应的令牌到本地
2.2在AXIOS拦截器中设置令牌到授权请求头
3.后端实现思路：
3.1判断用户登录成功，生成令牌，响应给用户
3.2拦截需要身份认证的所有请求，获取客户端发送的授权请求头进行令牌验证

（1）、下载npm i jsonwebtoken
（2）、时序图
在这里插入图片描述

（1）、服务端

在这里插入图片描述

（2）、客户端(便捷版)request.js

在这里插入图片描述

上图备注：在客户端登录时候将token保存在本地的localstorage,之后的左侧menu可以使用token
在这里插入图片描述

（3）封装生成和认证token代码

const jwt = require(‘jsonwebtoken’) //引入jwt库
const tokenSecrit = ‘token-20220612’
const Token = {
/**
* 生成token令牌
/
entrypt: function (data) {
return jwt.sign(data, tokenSecrit, { expiresIn: ‘10h’ })
},
/*
* 验证token
*/
decrypt: function (token) {
try {
let data = jwt.verify(token, tokenSecrit)
return {
token: true,
}
} catch (error) {
return {
token: false,
data:error
}
}
},
}

module.exports = Token

（4）、拦截所有请求进行认证

const express = require(‘express’);
const bodyParser = require(‘body-parser’) //bodyParser
const cors = require(‘cors’) //cors
const jwtToken = require(‘./utils/jwtUtil’) //token认证工具模块
//引入Router路由模块
const indexRouter = require(‘./routes/index’);
const usersRouter = require(‘./routes/users’);
const memberRouter = require(‘./routes/member’)
const productRouter = require(‘./routes/product’)
//express实例化
const app = express();
//use
app.use(bodyParser.json()); //解析json
app.use(bodyParser.urlencoded({ extended: false })); //解析数值对
app.use(cors()) //解决乱码
app.use(express.static(‘public’)); //内置托管静态文件
/**

app.js模块文件中
token统一认证
/
app.all(‘/’,function(req,res,next){
/*
- 注册和登录直接放行
  /
  console.log(‘req.url>>>’,req.url);
  let noAuthor = [‘/user/login’,‘/user/register’]
  if(noAuthor.indexOf(req.url) !== -1){
  next() //直接放行
  return
  }
  /*
- token认证
  */
  let token = null
  //1.是否存在token
  if(req.headers.authorization){
  token = req.headers.authorization
  }
  //2.验证token正确性
  let data = jwtToken.decrypt(token)
  if(data.token){
  res.send({
  resultCode:1,
  resultInfo:‘token在服务端认证成功>>>’
  })
  next()
  }else{
  res.send({
  resultCode:-1,
  resultInfo:‘token在服务端认证失败>>>’
  })
  }
  })
  //模块化
  app.use(‘/’, indexRouter);
  app.use(‘/api/user’, usersRouter);
  app.use(‘/api/member’,memberRouter)
  app.use(‘/api/product’,productRouter)
  //暴露
  module.exports = app;

（5）、前端需要认证的接口设置头，便捷方式是：使用axios封装好的请求拦截器axiosServer.interceptors.request.use

const axiosServer = axios.create({
baseURL: ‘http://10.7.173.85:3000’,
timeout: 2000,
})

// 请求拦截器
axiosServer.interceptors.request.use(
function (config) {
console.log(‘发送请求之前，执行这里的代码’);
// 发送请求之前，执行这里的代码
// 在请求拦截器
// 将登录成功保存的token设置到authorization请求头，发送给后端
// 1. 获取登录成功保存的token
let token = localStorage.getItem(‘TOKEN’)
token = JSON.parse(token)
if (token) {
// 2. 设置到authorization请求头
config.headers.common[‘authorization’] = token
}
return config
},
function (err) {
//处理请求错误
return Promise.reject(err)
}
)

// axiosServer({
// method: ‘get’,
// url: ‘/product/list’,
// }).then(res=>{
// console.log(res)
// }).catch(err=>{
// console.log(err)
// })

（6）、前端需要认证的接口设置头，一般方式是：这需要每一个axios请求都加一个headers,(headers: { authorization: token }, // token设置)

// 获取登录时保存的token
let tokenStr = localStorage.getItem(‘TOKEN’)
let token = JSON.parse(tokenStr)

axios({
	method: 'get',
	url: 'http://10.7.173.110:3000/product/list',
	headers: { authorization: token }, // token设置
}).then(res => {
	let { data } = res
	if (data.code == 1) {
		let list = data.message.list
		showProductList(list)
	}
})