Nuxt 的auth routes(路由鑑權)

這陣子在把rails前端的部分搬到另外一個Server的工作，由於新的server只負責SSR，所有的資料和處理都還是在原本的Server，在驗證使用者的部分就需要多跳過一層Nuxt的Server端來處理。原本的前端小妹把所有token寫在cookie裡面，但這樣實在太危險啦～～所以才有這篇幫忙他處理並且記錄下來。

在Nuxt的Example裡已經有簡單的auth routes說明了，這裏稍作一點調整而已。

首先先思考一下登入的流程

1. Nuxt的client端登入頁面輸入帳號密碼，送出時呼叫Vuex的Login action處理登入，並且把輸入的帳號密碼傳過去，
2. Login Action使用axios呼叫Nuxt Server端的登入API，再把輸入的帳號密碼傳過去
3. Nuxt Server端的登入API將帳號密碼等資料利用axios送到真正在處理資料的遠端Server，等待結果回傳
4. Nuxt Server API收到結果回傳之後，把token等驗證資料存到session裡
5. 在Vuex Action裡的nuxtServerInit函式裡檢查session是否存在token，有的話代表已經完成登入，把token資料存到Vuex State裡面
6. 製作middleware檢查Vuex State裡是否存在token資料，如果不存在則表示沒有登入，轉址到登入頁面

流程相當簡單，但由於原本的架構導致實作的時候踩到不少雷啊

第一步由於我們把資料存在session裡，因為這裡server端已經先使用了express框架，所以需要先安裝express-session，另外需要body-parser來處理session資料

> yarn add express-session body-parser

第二步先把Server端的API建起來，增加一個~/server/api/index.js

再來需要再nuxt.config.js裡設定ServerMiddleware

這樣就增加了/api/store/login和/api/logout兩個路由處理登入和登出了

接下來在Vuex Action裡增加初始化和登入登出相關的函式

這裡要特別留意的是nuxtServerInit只能在最外層的actions裡，也就是不能夠包在其他的module裡面

最後增加一個檢查是否登入的中間件

在你需要檢查是否登入的layout或者page內增加middleware: ‘checkAuth’就可以完成整個路由驗證的功能囉！目前的例子Session是存在Server的記憶體內，如果量大的話建議還是存在另外的redis server或者再做處理，不過那是之後的事情了，nuxt的生命週期和Vue的週期還需要特別注意Server端的部分，在操作的時候才不會遇到做了功能卻老是不會跑的問題。