[MEAN_STACK] miniERP - Development Log 2 : Add Login/Logout Functionality

這次要新增 Login 和 Logout 的功能

會多使用一些 modules，可用以下方式安裝

I am going to add login/logout functionality to the system.

Install following packages before starting.

npm install express-session --save

npm install connect-mongo --save

npm install ejs --save

bower install angular-md5 --save

source code 在此


1. 修改 server.js 如以下

   [1] 將新安裝的 module 導入dbSessionConn 是之後會自己寫的 module

   [2] 指定好 ejs 檔案的位置，並且指定 view engine

   [3] 使用 session，並透過 connect-mongo 存到 mongodb

   Modify server.js as below.

   [1] import packages

   [2] set the path of ejs files and the view engine

   [3] use session to store user data and save to mongodb by connect-mongo package

2. 將之前的 index.html 更名為 index.ejs，並且修改成以下內容

   利用 ejs 的特性來將共同部分提出來共用

   Rename index.html to index.ejs and modify as below.

   What I did here is to extract the common parts and reuse them later.

3. 新增 header.ejs、nav.ejs、login.ejs 到 public/views 下

   Add header.ejs、nav.ejs、login.ejs to public/views

   header.ejs : 基本所需的 script、css以及 title   

   header.ejs : the basic header part of each ejs file

   nav.ejs : 把共同的 navigation bar 抽出來。登出選項會根據user 是否有登入才會顯示

   nav.js : common navigation bar part. Logout option only be showed when user is login.

   login.ejs : login 的頁面，之後會再實做相關 angularJs 的部分

   login.ejs : login page. Relative JS code will be explained later.

4. 在 public/javascript 下新增 login.js

   創一個 angular 的 module，並且將 angular-md5 導入

   接下來為這個 module 新增 controller

   Add login.js to public/javascript.

   Create an angular module and inject angular-md5 module.

   Next, implement angular controller.

   接續上面，這邊實做兩個 function

   disableLogin : 用來檢查是否 login 相關資料都有輸入

   login : 向 server 做  login。在傳送資料之前，會將密碼做一次encryption

           如果 login 成功，就將頁面導到main page

   Implement two functions here.

   disableLogin : check user input data are complete or not

   login : user login function. Encryption password before sending data to server.

5. 在 module 下新增 database.js、dbEmployees.js、dbSessionConn.js 三個檔案

   Add database.js、dbEmployees.js、dbSessionConn.js to /module

   database.js : 用來儲存 db 的 url

   database.js : save urls of dbs

   dbEmployees.js : 連接 mongodb，用來管理員工資料

   dbEmployee.js : data of employee

   dbSessionConn.js : 提供給 express-session 用，將 session 存到 mongodb

   dbSessionConn.ls : provide connection to mongodb to express-session

6. 修改 routes/routes.js 如以下

   [1] : 將剛剛寫的 dbEmployees.js 導入

   [2] : 新增一個檢查 : 如果 user 沒有登入，直接導到登入頁面

   [3] : 新增 /login 的 routing，並且確保是沒有 login 的狀態

   Modify routes/route.js as below.

   [1] : import dbEmployees.js

   [2] : check user is login or not before route to /

   [3] : add /login routing rule and make sure user is not login

   接續上面

   增加兩個 API，分別是 /api/login 和 /api/logout。在這邊將 user 的登入資訊存到

   req.session.user，之後就可以使用 req.session.user 來拿 user 的資料

   Add two APIs, /api/login and /api/logout.

   Store user data to req.session.user after user is login.

   接續上面

   這兩個 function 分別用來檢查是否已經登入

   These two functions are used to check user is login or not.

   

7. 基本上 login/logout 功能都已經完成，因為還沒有做新增員工資料的功能，所以這邊用一個

   簡單的程式，先新增一個 admin 的帳號，來測試相關功能

   需要先用 npm 安裝 mongoose 和 crypto

   Basic login/logout functionality is done. Because there is no add employee 

   functionality right now, I used a simple program to add admin user for testing.

   用 node 執行這個程式即可在 mongodb 存入一筆 admin 的資料，執行之前記得先執行 

   mongodb

   Use node to execute the program and there will be an admin data saved in mongodb. 

   Remember to start mongodb first.

8. 連接 http://localhost:3000 會直接導到 http://localhost:3000/login

  Go to http://localhost:3000 and will be redirected to http://localhost:3000/login

   輸入剛剛新增的 admin 的 email 和密碼，登入後就可以看到 main page，在 navigation bar 也

   可以看到登出選項

   Login as admin which was added earlier and you can see the main page and the 

   navigation bar with logout option.