【Koa】腳手架登入驗證

Milk595發表於2020-10-12

腳手架登入驗證

目錄列表:

在這裡插入圖片描述

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時，表示登入失敗