DB 회원정보 테이블에 있는 회원정보를 가져와 로그인 처리를 진행해보겠습니다.
기본적인 로직은 리스트 표시하기와 동일합니다.
폼입력 -> API 호출 -> API에서 DB쿼리 결과값 확인 -> 결과 표시
다만 리스트 표시와는 다르게 완료시에 세션과 같은 로그인 완료처리가 필요합니다.
추가로 리스트에도 내 할일만 표시되게 기능 수정이 필요합니다.

1.프론트 처리 (frontend/src/commponents/page/login.vue)

<template>
    <div class="login">
        <h2 class="comm__title">LOGIN</h2>
        <div class="ipt__box">
            <input type="text" class="ipt" placeholder="ID" v-model="user.id">
        </div>
        <div class="ipt__box">
            <input type="password" class="ipt" placeholder="Password" v-model="user.password" @keyup.enter="login()">
        </div>
        <div class="ipt__btn">
            <a href="#" class="btn btn--confirm btn--large" v-on:click="login()">LOGIN</a>
        </div>
    </div>
</template>
<script>
    export default  {
        data() {
            return {
                user : {
                    id : '',
                    password : ''
                }
            }
        },
        methods : {
            login : function () {
                if (this.user.id == '') {alert('아이디를 입력해주세요.');return;}
                if (this.user.password == '') {alert('비밀번호를 입력해주세요.');return;}
                this.$http.post('/api/login', {user:this.user}).then((response) => {
                    if (response.data.success == true) {
                        alert(response.data.message);
                        this.$router.push('/list'); //로그인 성공시 list 페이지로 이동
                    } else {
                        alert(response.data.message);
                    }
                });
            }
        },
        created () {
        }
    }
</script>

로그인 버튼 클릭시 login 함수를 실행합니다.
API 쿼리 결과를 바탕으로 경고창을 출력해줍니다.
추가로 엔터키 입력시 login 함수처리와 로그인 뒤 이동처리도 추가합니다.

2.API 처리 (backend/app.js)

세션 관련 NPM 패키지 추가

npm install express-session --save
npm install express-mysql-session --save

express-session, express-mysql-session NPM 패키지를 설치합니다.

모듈 호출 수정

var express = require('express');
var mysql = require('mysql');
var bodyParser = require('body-parser');
var session = require('express-session');
var MySQLStore = require('express-mysql-session')(session);
var jsonParser = bodyParser.json();
var cookieParser = require('cookie-parser');
var path = require('path');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');


app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

var connection = mysql.createConnection({
    host : '127.0.0.1',
    user : 'admin',
    password : '****',
    database: 'todos'
});
connection.connect();

var options = {
    host: '127.0.0.1',
    port: '3306',
    user: 'admin',
    password: '****',
    database: 'todos'
}
var sessionStore = new MySQLStore(options);
app.use(session({
    secret: '!@#$%^&*',  // 암호화
    resave: false,
    saveUninitialized: true,
    store: sessionStore
}));

express-session과 express-mysql-session를 추가합니다.
DB에 연결하고 세션 옵션을 선언합니다.

로그인 API 수정

app.post('/api/login', function (req,res) {
    var params = [req.body.user.id,req.body.user.password];
    connection.query(
        "SELECT * FROM `todos_member` WHERE `member_id`= ? and `member_pw` = ?", params,
        function (error, results) {
            if (error) console.log(error);
            if (results.length === 1) {
                req.session.userNo = results[0].member_no;
                req.session.save();
                res.json({
                    success : true,
                    message : req.body.user.id+'님 로그인 되었습니다.'
                });
           } else {
                res.json({
                    success : false,
                    message : '로그인에 실패했습니다.'
                });
            }
        }
    );
});

로그인 API입니다.
아이디와 비밀번호를 확인하여 결과가 있을시 세션을 생성하고 로그인 메시지를 띄웁니다.