Nuxt在SPA模式下的鑑權處理(1)

最近項目使用了Nuxt, 不過因爲考慮到項目須要快速上線, 放棄了SSR, 直接採用單頁面SPA模式進行開發, 也是本人第一次使用Nuxt來進行項目開發, 如下是我開發中對於 鑑權這塊的研究和總結, 由於官方給了一個 鑑權示例是基於Server端的, 因此我就又寫了一篇Client端的鑑權總結~

文章分爲不少篇, 會逐步完善更新, 請耐心等待...

預備知識

• Vue和Vuex
• Document.cookie
• HTTP 的基本性質
• Window.localStorage和Window.sessionStorage

介紹

Nuxt.js 是一個基於 Vue.js 的通用應用框架。那麼既然是基於Vue的, 它天然也就用到的Vuex, 那麼會遇到一個問題, 它本是狀態管理模式, 不過有時候咱們會做爲數據共享的一種解決方案, 可是它會在頁面刷新時丟失.

所以在Vue項目開發中, 咱們每次刷新獲取數據可能只有兩種方式:

1. 每次刷新都會向服務器發送請求, 拿到數據後, 對頁面從新更新視圖
2. 每次操做都會存在本客戶端的Cookie或者Storage中

很顯然通常狀況下, 第一種方法會給服務器資源形成浪費, 除非須要獲取的數據是頻繁變化的, 那麼咱們通常會使用第二種. 下面就主要針對第二個方案進行總結.

需求分析

咱們都知道HTTP是無狀態的, 那麼爲了讓用戶每次訪問頁面的時候會話可以保持, 則須要用cookie或者storage來記錄. 咱們後臺的session有效期爲半小時.

在這半小時內, 用戶處於登陸狀態, 本地也保存了有效憑證的狀況下, 則該用戶的有效資源請求能夠被執行, 而無需服務器每次進行驗證~

需求方但願本地存儲的憑證會在會話關閉後清除, 所以咱們首先排除localStorage, 考慮使用Cookie和sessionStorage! 又由於本人比較懶, Cookie操做比較麻煩, 因此決定使用sessionStorage.(雖然最後還使用了插件...)

基礎實例

用sessionStorage存儲Vuex全局data的方式展現

建立一個Nuxt應用

咱們基於Nuxt的Starter的Cli來構建一個簡單的Nuxt應用, 命令以下

vue init nuxt-community/starter-template nuxt-spa-demo
cd nuxt-spa-demo
npm i

修改模式爲SPA模式

修改修改nuxt.config.js, 添加mode: 'spa',, 大體以下:

module.exports = {
  mode: 'spa',
  head: {
    ...
  }
  ...
}

建立Vuex基本內容

而後store目錄建立一個index.js, 代碼以下

export const state = () => ({
  counter: window.sessionStorage.getItem('counter') || 0
})

export const mutations = {
  increment: state => {
    state.counter++
    window.sessionStorage.setItem('counter', state.counter)
  },
  decrement: state => {
    state.counter--
    window.sessionStorage.setItem('counter', state.counter)
  }
}

那麼在Vuex的Mutatations中, 每次也會同時對sessionStorage進行操做.

另外在頁面加載時, 先檢查sessionStorage中是否存在counter這樣一個變量, 若是沒有則設置默認值0

建立一個可操做Vuex的界面

接着修改默認主頁page/index.vue, 代碼大體以下

<template>
  <section class="container">
    <div class="demo-wrap">
      <app-logo/>
      <h1 class="title">
        nuxt-spa-demo
      </h1>
      <h2 class="subtitle">
        Nuxt with sessionStorage or cookie
      </h2>
      <div class="content">
        <p>{{ counter }}</p>
        <p>
          <button @click="increment">+</button>
          <button @click="decrement">-</button>
        </p>
      </div>
    </div>
  </section>
</template>
<template>
  <section class="container">
    <div class="demo-wrap">
      <app-logo/>
      <h1 class="title">
        nuxt-spa-demo
      </h1>
      <h2 class="subtitle">
        Nuxt with sessionStorage or cookie
      </h2>
      <div class="content">
        <p>{{ counter }}</p>
        <p>
          <button @click="increment">+</button>
          <button @click="decrement">-</button>
        </p>
      </div>
    </div>
  </section>
</template>

<script>
import AppLogo from '~/components/AppLogo.vue'
import { mapState, mapMutations } from 'vuex'
export default {
  components: {
    AppLogo
  },
  computed: {
    ...mapState(['counter'])
  },
  methods: {
    ...mapMutations(['increment', 'decrement'])
  }
}
</script>
<style lang="scss" scoped>
...
</style>

運行應用並測試

修改基本完成後, 大體的效果可見該分支nuxt-auth-a, 而後運行應用

npm run dev

打開http://localhost:3000, 點擊 +或-, 數字變化後, 刷新頁面, 能夠觀察到, 它並不會回到0, 那麼一個簡單的實例就完成了.

須要注意的是

• sessionStorage的數據並不會在多個相同網站地址的窗口共享, 也就是說每次鏈接都是新的
• sessionStorage存儲的數據, 關閉當前標籤, 從新開啓, 數據會清空, 可是若是你並非新的請求, 例如執行了__撤銷上一次關閉的標籤(Ctrl+Shift+T)__這樣的操做, 他以前的數據依舊保留

總結

其實一個最簡單的基於sessionStorage的存儲數據的例子, 代碼並很少, 可是一旦用於複雜的項目應用中, 也許這種處理方式並很差, 好比說需求變動帶來的調整等等, 藉助插件是一個不錯的選擇. 本次介紹的內容比較簡單, 後面會逐步完善Nuxt鑑權的過程的思考.

本人也是邊在學習邊實踐總結, 文中若有錯誤還請多多指正.