Typescript爬虫实战 ---- 登录功能的开发

使用session完成登录功能的开发

借助中间键cookie-session

• 安装：npm install cookie-session @types/cookie-session -S

• 如果用户已经登陆过，提示已经登陆

• 否则，用户输入正确的密码，标记为登陆，设置session

• 否则登陆失败

登陆界面：

image.png

成功登陆之后：

image.png

//login 接口
router.post('/login',(req:Request,res:Response)=>{
  const isLogin = req.session ? req.session.login : false
  if(isLogin){
    res.send(`already login`)
  }else{
    if(req.body.password === '123' && req.session){
      req.session.login = true
      res.send('login success')
    }else{
      res.send(`${req.username} invalid password`)
    }
  } 
})

• 使用logout进行登出

router.get('/logout',(req:Request,res:Response)=>{
  if(req.session){
    req.session.login = undefined
    res.redirect('/')
  }
})

调整后的getData接口，获取数据：

router.post('/getData',(req:Request,res:Response)=>{
  const isLogin = req.session ? req.session.login : false
  if(isLogin){
    const secret = 'x3b174jsx'
    const url = `http://www.dell-lee.com/typescript/demo.html?secret=${secret}`
    const analyzer = new WebAnalyzer()
    new Crowller(url,analyzer)
    res.send('success')
  }else{
    res.send(`please login first`)
  }
})

展示数据showData:

router.get('/showData',(req:Request,res:Response)=>{
  try {
    const filePath = path.resolve(__dirname,'../data/course.json')
    const result = fs.readFileSync(filePath,'utf-8')
    res.json(JSON.parse(result))
  } catch (error) {
    res.send('please login first')
  }
})

到这边位置，所有的功能就开发的差不多了，但需要继续优化一下代码结构。

优化代码

在showData和getData这两个接口中，有一大部分重复的逻辑：都需要判断是否登陆，在进行逻辑操作。
而这一部分可以利用中间件，对逻辑进行复用

//checkLogin中间件
const checkLogin = (req:Request,res:Response,next:NextFunction) => {
  const isLogin = req.session ? req.session.login : false
  if(isLogin){
    next()
  }else{
    res.send('please login first')
  }
}
// 加完自定义中间件的getData,同理showData
router.get('/getData',checkLogin,(req:Request,res:Response)=>{
  const secret = 'x3b174jsx'
  const url = `http://www.dell-lee.com/typescript/demo.html?secret=${secret}`
  const analyzer = new WebAnalyzer()
  new Crowller(url,analyzer)
  res.send('success')
})

统一接口模式

在实际的开发过程中，是前后端分离的开发模式，不会以res.send的形式返回html片段，统一一下格式。

//定义返回格式的函数
interface Result{
  success:boolean,
  errMsg?:string,
  data:any
}

export const getResponseData = (data:any,errMsg?:string):Result =>{
  if(errMsg){
    return{
      success:false,
      errMsg,
      data
    }
  }
  return{
    success:true,
    data
  }
}

//重写返回数据部分
res.json(getResponseData(false,'please login first'))

统一处理好之后返回的数据格式也就符合一般开发要求了

image.png