【Koa】脚手架登录验证

最新推荐文章于 2024-05-16 19:06:52 发布

Milk595

最新推荐文章于 2024-05-16 19:06:52 发布

阅读量524

点赞数

分类专栏： Koa 文章标签： Koa 脚手架登录验证

本文链接：https://blog.csdn.net/weixin_43352901/article/details/109038430

版权

Koa 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

脚手架登录验证

目录列表:

在这里插入图片描述

app.js:

const Koa = require('koa')
const app = new Koa()
const views = require('koa-views')
const json = require('koa-json')
const onerror = require('koa-onerror')
const bodyparser = require('koa-bodyparser')
const logger = require('koa-logger')
const session=require('koa-session');
const index = require('./routes/index')
const users = require('./routes/users')

// error handler
onerror(app)

//session设置
app.keys=['this is my secret set']
app.use(session({
key:'koa:sess',//cookie key(default is koa:sess)
maxAge:86400000,//cookie的过期时间 maxAge in ms（default is 1days）
overwrite:true,//是否可以overwrite（默认default true）
httpOnly:true,//cookie是否只有服务端可以访问httpOnly or not （default true）
signed:true,//签名默认 true
rolling:false,//在每次请求时强行设置cookie，这将重置cookie过期时间（默认false）
renew:false,//（boolean）renew session when session is nearly expried
},app))
// middlewares
app.use(bodyparser({
  enableTypes:['json', 'form', 'text']
}))
app.use(json())
app.use(logger())
app.use(require('koa-static')(__dirname + '/public'))

app.use(views(__dirname + '/views', {
  //extension: 'ejs'
  map:{html:'ejs'}
}))

// logger
app.use(async (ctx, next) => {
  const start = new Date()
  await next()
  const ms = new Date() - start
  console.log(`${ctx.method} ${ctx.url} - ${ms}ms`)
})

// routes
app.use(index.routes(), index.allowedMethods())
app.use(users.routes(), users.allowedMethods())

// error-handling
app.on('error', (err, ctx) => {
  console.error('server error', err, ctx)
});

module.exports = app

controllers中的home.js:

module.exports={
    checkLogin:async(ctx,next)=>{
        let { name, password } = ctx.request.body;
        if (name == '123' && password == '123') {
           ctx.session.user=name;
           ctx.response.redirect('/');
        } else {
            ctx.body = { success: false, msg: '登录失败--账号密码有误' }
        }
    },
    index:async(ctx,next)=>{
        let userSession=ctx.session.user;
        await ctx.render('index', {
            title: 'Hello Koa 2!',
            userSession: userSession
        })
    },
    logout: async (ctx, next) => {
        ctx.session.user=null;
        let userSession = ctx.session.user;
        await ctx.render('index', {
            title: 'Hello Koa 2!',
            userSession: userSession
        })
    },

}

Middleware中的login.js:

module.exports={
    loginstats:async(ctx,next)=>{
        if(!ctx.session.user){
            ctx.response.redirect('/users/login');
        }else{
            await next();
        }
    }
}

Public文件展示：引入静态资源

在这里插入图片描述

Routes中的index.js:

const router = require('koa-router')()
const homeController = require('../controllers/home')
router.get('/',homeController.index)
module.exports = router

Routes中的users.js:

const router = require('koa-router')()
const homeController=require('../controllers/home')
const loginMiddleware=require('../middleware/login')
router.prefix('/users')

   router.get('/login', async function (ctx, next) {
     await ctx.render('login',{});
   })

   router.post('/checkLogin',homeController.checkLogin)
router.get('/logout', homeController.logout)

router.all('*',loginMiddleware.loginstats)  
router.get('/userInfo',function(ctx,next){
  ctx.body='只是用户详情页，包含很多用户信息'
})

module.exports = router

views中的index.html:

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <p>EJS Welcome to <%= title %></p>
    <%if(!userSession){%>
    <p><a href="/users/login">登录</a></p>
    <%}else{%>
    <p><%=userSession%></p>
    <p><a href="/users/logout">注销</a></p>
    <p><a href="/users/userInfo">用户详情</a></p>
    <%}%>
  </body>
</html>

views中的login.html

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="../stylesheets/login.css">
    <title>登陆</title>
</head>
<body>
    <div class="header" id="head">
        <div class="title">XXXX 系统登陆</div>
          
      </div>
          
      <div class="wrap" id="wrap">
          <div class="logGet">
                  <!-- 头部提示信息 -->
                  <div class="logD logDtip">
                      <p class="p1">登录</p>
                  </div>
                  <form action="/users/checkLogin" method="POST">
                    <!-- 输入框 -->
                    <div class="lgD">
                        <input type="text" name="name"
                            placeholder="输入用户名" />
                    </div>
                    <div class="lgD">
                        <input type="password" name="password"
                            placeholder="输入用户密码" />
                    </div>
                    <div class="logC">
                        <button type="submit">登 录</button>
                    </div>
                  </form>
              </div>
      </div>
          
      <div class="footer" id="foot">
        <div class="copyright">
          <p>Copyright © 2019 huaruan.com Inc. All Rights Reserved.</p>
          <div class="img">
              <i class="icon"></i><span>联系邮箱：123123@sise.com</span>
          </div>
          
          <div class="img">
              <i class="icon1"></i><span>联系地址：广州大学华软软件学院</span>
          </div>
            
          <div class="img">
            <i class="icon2"></i><span>联系电话：12345678</span>
          </div>
       
       
        </div>
          
      </div>
</body>
</html>

结果

1.Localhost:3000—初始界面：
在这里插入图片描述
2.点击注销时，跳转到登陆窗口：

3.点击登录时，进入到登录界面：

4.输入用户名和密码，当输入用户名和密码都为123时，登录成功，成功时跳转到初始界面

5.登录成功后，点击注销时，又会跳转到登录窗口进行登录：
在这里插入图片描述
6.当在登录界面时，输入用户名和密码不是123时，表示登录失败

Milk595

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Koa】脚手架登录验证

脚手架登录验证目录列表:app.js:const Koa = require('koa')const app = new Koa()const views = require('koa-views')const json = require('koa-json')const onerror = require('koa-onerror')const bodyparser = require('koa-bodyparser')const logger = require('koa-logg
复制链接

扫一扫