Skip to main content

后端登录功能实例

内容​

  • / 首页|登录
  • /logout 退出
  • /login 登录
  • /showData 展示数据

框架​

  • express

插件​

  • body-parser requestBody解析插件
  • cookie-session 登录权限校验

编译运行插件​

  • nodemon 如果有修改文件重新启动服务
  • concurrently 同时执行多条指令

步骤​

npm install typescript ts-node -D

tsc -init

tsconfig.json：
"outDir": "./build"
"rootDir": "./src", 


npm install nodemon concurrently -D



 "scripts": {
    "dev:build": "tsc -w",
    "dev:start": "nodemon node ./build/index.js",
    "dev": "tsc && concurrently npm:dev:*"
  },


  npm install express body-parser cookie-session -S



  npm install  @types/express @types/body-parser @types/cookie-session -D

//index.d.ts
import express, { } from 'express';
import bodyParser from 'body-parser'
import cookieSession from 'cookie-session'
import Router from './router'

const app = express();

app.use(bodyParser.urlencoded({ extended: false }));

app.use(cookieSession({
    name: 'session',
    keys: ['typescript-api'],
    maxAge: 24 * 60 * 60 * 10000
}))
app.use(Router);
app.listen(8000,()=>{
    console.log("server success!");
})

修改已有接口的类型​

第一种方式​

interface MyRequest extends Request{
     body:{
        password:string
     }
}
router.get('/', (req: MyRequest, res: Response) => {
})

添加已有接口类型(全局)​

declare namespace CookieSessionInterfaces {

    interface CookieSessionObject {

        isLogin?: boolean | undefined;
    }
}

代码​

//建立工具函数
//utils/index.ts

import { Request, Response, NextFunction } from "express"

interface Result {
    data: any;
    success: boolean;
    errMsg?: string;
}

export const checkLogin = (req: Request, res: Response, next: NextFunction) => {
    if (req.session?.isLogin) {
        next();
    } else {
        res.json(getResponseData(null, '请先登录'));
    }
}

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


//添加测试数据
//utils/data.json
{"1577807863181":[{"title":"Vue2.5开发去哪儿网App","count":20},{"title":"React 16.4 开发简书项目","count":21},{"title":"React服务器渲染原理解析与实践","count":86},{"title":"手把手带你掌握新版Webpack4.0","count":4}],"1577807995656":[{"title":"Vue2.5开发去哪儿网App","count":49},{"title":"React 16.4 开发简书项目","count":69},{"title":"React服务器渲染原理解析与实践","count":44},{"title":"手把手带你掌握新版Webpack4.0","count":34}],"1577889957672":[{"title":"Vue2.5开发去哪儿网App","count":77},{"title":"React 16.4 开发简书项目","count":100},{"title":"React服务器渲染原理解析与实践","count":90},{"title":"手把手带你掌握新版Webpack4.0","count":60}],"1577890616471":[{"title":"Vue2.5开发去哪儿网App","count":83},{"title":"React 16.4 开发简书项目","count":89},{"title":"React服务器渲染原理解析与实践","count":13},{"title":"手把手带你掌握新版Webpack4.0","count":36}]}



//tsconfig.json  可以导入json
 "resolveJsonModule": true,  


 //router.ts

 
import Express, { Router, Request, Response, NextFunction } from 'express'

import { getResponseData, checkLogin } from './utils/index'

import * as Data from './utils/data.json'
interface RequestWithBody extends Request {
    body: {
        [key: string]: string | undefined
    }
}



const router = Router();

const homePageHtml = `
<html>
<body>
 <a  href="/showData" >展示数据</a>
 <a  href="/logout" >退出登录</a>
</body>
</html>
`
const loginPageHtml = `
<html>
<body>
  <form method="post" action="/login">
    <input type="password" name="password" />
    <button>登陆</button>
  </form>
</body>
</html>
`

router.get('/', (req: Request, res: Response, next: NextFunction) => {

    if (req.session?.isLogin) {
        res.send(homePageHtml);
    } else {
        res.send(loginPageHtml);
    }

})

router.post('/login', (req: RequestWithBody, res: Response) => {
    if (req.session?.isLogin) {
        res.json(getResponseData(false, '已经登录过'))
    } else {
        if (req.body?.password === '123456' && req.session) {
            req.session.isLogin = true;
            res.json(getResponseData(true))
        } else {
            res.json(getResponseData(false, '登录失败'));
        }
    }
})


router.get('/logout', checkLogin, (req: Request, res: Response) => {

    if (req.session) {
        req.session.isLogin = undefined;
    }
    res.json(getResponseData(true));
})

router.get('/showData', checkLogin, (req: Request, res: Response) => {

    res.json(getResponseData(Data))

})

export default router;