Nuxt 實現使用者鑑權登陸

AtomG發表於2019-10-05
UX

引言

部落格前臺重構完畢了，接下來就是後臺部分了，後臺的主要功能就是釋出、刪除、修改文章，自然不是誰都能隨便進的。在 vue 專案中，我是在 Vue Router 的全域性前置守衛裡判斷當前使用者是否有 cookie 從而判斷是否有權進入後臺。而 Nuxt 相比 Vue 專案最大的不同之一就是沒有使用 Vue Router 而是使用 目錄來進行頁面路由，自然我們就失去了 全域性前置守衛這個利器，當然 Nuxt 是有解決辦的，不過在那之前我們需要先來了解一下鑑權的原理。

Cookie 和 Session

相信前端的同學們對這兩個名字早就有所耳聞，卻不一定有詳細的瞭解。眾所周知，我們瀏覽網頁使用的 HTTP 協議是無狀態的的，也就是說你每一次請求對於伺服器來說都是一樣的，它沒有辦法記住這個請求是你發的。所以這裡就要用到Cookie。

Cookie 是服務端設定的，由瀏覽器儲存在你的硬碟中的一組資料，，比如你的使用者 資料，每次向伺服器傳送請求就會攜帶上這個資料。伺服器檢視就能知道這是誰發過來的。這一過程就稱為Session（會話）

Session 初始是指一種概念，是你和網站發生互動的一個週期。在這個週期中伺服器就是通過儲存在瀏覽器的 Cookie 來判別你是誰。但是因為儲存在本地的Cookie並不安全，誰都可以看到並更改，所以現在更為流行的做法是僅僅通過 Cookie 儲存 的唯一的使用者識別符號（SessionID）來識別使用者，而使用者資訊儲存在伺服器端。所以 Session 這個概念可以說是 Cookie 的上級也可以說是其同級

Nuxt 鑑權

講解了 Nuxt 鑑權的基本原理，我們可以知道鑑權就是在在使用者進入這個頁面的時候對本地的 Cookie 進行判斷，存在設定好的 Cookie 那麼說明這個使用者已經登陸過了，放他過去。啥也沒有？ 不行你去給我登陸，就跳轉到登入頁面。明白了這個流程就開始具體的工作了。

伺服器端

在伺服器端我們使用 koa-session 安裝 koa-session

npm install koa-session 
npm install koa-session-mongoose //使用 mongodb 儲存 Session 資訊複製程式碼

然後在入口檔案中這樣使用

app.use(
  session(
    {
      key: "***",         //加密金鑰
      overwrite: true,    //覆寫Cookie
      httpOnly: true,     //經允許通過 JS 來更改
      renew: true,
      store: new MongooseStore({
        createIndexes: "appSessions",
        connection: mongoose,
        expires: 86400, // 1 day is the default
        name: "AppSession"
      })                  //傳入一個用於session的外部儲存，我這裡是使用了 mongodb 
    },
    app
  )
);複製程式碼

因為 koa 預設會把 Session 打到 ctx.session 中,不方便使用者端獲取，所以我們把它移一下位，挪到 ctx.req.session 中

  app.use((ctx) => {
    ctx.status = 200
    ctx.respond = false // Bypass Koa's built-in response handling
    ctx.req.session = ctx.session
    ctx.req.ctx = ctx // This might be useful later on, e.g. in nuxtServerInit or with nuxt-stash
      return new Promise((resolve, reject) => {
        ctx.res.on('close', resolve)
        ctx.res.on('finish', resolve)
        nuxt.render(ctx.req, ctx.res, promise => {
          // nuxt.render passes a rejected promise into callback on error.
          promise.then(resolve).catch(reject)
        })
      })
  })複製程式碼

這是登陸函式，查詢資料庫是否又對應的使用者名稱和密碼，存在的話，給客戶端設定一個 Cookie 返回登入成功

  static async login(ctx) {
    let { passwd, email } = ctx.request.body;
    let hasuser = await UserModel.findOne({ email: email, passwd: md(passwd) });

    if (!hasuser) {
      return ctx.error({});
    }
    else {
      let userid = hasuser._id;
      const { session } = ctx;
      session.userid = userid;
      return ctx.success({ data: { userid: userid } });
    }
  }複製程式碼

服務端設定完成了

客戶端（Nuxt）

其實以上的步驟和 Vue 專案中一模一樣，Nuxt 中主要的不同就是失去了全域性前置守衛，那麼要在哪裡判斷是否存在 Cookie 呢，別急，Nuxt 官方自然是給瞭解決方案，先看一下 Nuxt 的生命週期

image

這裡我們用到的就是紅框中的 nuxtServerInit 和 middleware 這兩個時期，先來看程式碼

// store/index.js  Vuex 檔案中
export const actions = {
  // nuxtServerInit is called by Nuxt.js before server-rendering every page
  nuxtServerInit({ commit }, { req }) {
    if (req.session && req.session.userid) {
      console.log("使用者已經登入");
      commit("SET_USER", req.session.userid);
    }
  },
  
  export const mutations = {
  SET_USER(state, user) {
    state.authUser = user;
  },
  }複製程式碼

Store action 模組中的 nuxtServerInit 函式是整個生命週期 最先執行的，我們就在這裡判斷當前使用者瀏覽器中是否有 Cookie ，如果有的話就在 state 中用一個欄位儲存下來。是不是還挺像全域性前置守衛。這裡還只是做了判斷，打上了印記你登沒登陸，攔截在哪裡呢，別急，就是下一個流程 middleware 中。

開啟 middleware 資料夾( Nuxt 專案自帶)，新建 auth.js 檔案

// auth.js
export default function ({ store, redirect }) {
  if (!store.state.authUser) {
    return redirect('/welcome')
  }
}複製程式碼

瞧一下 Vuex 中看看你有沒有登陸，沒有的話把你送到登陸頁面去，簡單直接吧，只要在需要鑑權的頁面引用這個中介軟體即可，對於此專案只要在後臺管理頁面引用就好

export default {
    middleware: 'auth',
};複製程式碼

總結

就這樣完成了鑑權的操作，沒有登陸過的使用者在訪問後臺是時候會被重定向到登陸頁面去，就是很簡單的使用了一下 Cookie ，限於專案性質，session 的很多功能並沒有用到，比如在伺服器端儲存使用者資訊。主要是它的功能也就是防止別人訪問後臺，非常簡單。

還會有後續文章

  • koa-session 原始碼分析
  • 使用 koa-session 將使用者資訊儲存在 mongodb 中

敬請期待

Welcome to my Blog

相關文章