Laravel 5 – Gate & permissions

https://laravel.com/docs/5.8/authorization#writing-gates

使用者的操作權限，之前都是用Policy，沒用過Gate，覺得比較難理解。用Policy的前提是有一個對應的Model(文件裡又稱為resource)，檢查使用者對這個Model有沒操作權限。

Gate寫在Closure裡比較有彈性，可以像Policy的判斷，也可以自定義，不用綁Model，例如超級管理員的權限檢查跟任何Model都沒關係。

Gate的定義：一般放在AuthServiceProvider，或要新增另一個Provider放也可以。

// 定義
// AppServiceProvider.php

public function boot()
{
    Gate::define('update-post', function ($user, $post) {
        // 條件
        return $user->id === $post->user_id;
    });

    // 其他 Gate 定義
    // Gate::define(...
    // Gate::define(...

    Gate::define('delete-post', function ($user) {
        // 條件
        return $user->is_admin;
    });
}

nuxt – asyncData

https://nuxtjs.org/guide/async-data

asyncData()，在渲染view(載入page元件) 之前，先在server讀完資料並且回傳DOM。這方式讓原始碼看得出是那些HTML碼，搜尋引擎才爬的到內容。之前單純用vue在client渲染， 原始碼看起來很怪，引擎不能爬到內文。

client-side render：mounted()讀取資料

nuxt – 概念

https://nuxtjs.org

架構在vue之下的framework，屬於server-side render的框架。它的好處影片有清楚的介紹，已經整合vue router、vuex、vue-meta，檔案架構都歸類好了，看起來很有系統性。

Laravel 5 – middleware test

middleware test，算是單元測試，直接對middleware class撰寫測試碼，跟測model差不多，不會觸發請求路徑碰到Controller。

範例來自 codecourse.com。

範例：判斷使用者是否為管理者會導向不同的路徑。

class AdminMiddlewareTest extends TestCase
{
    public function test_登入者若為管理者其請求繼續()
    {
        $user = factory(App\User::class)->create(['is_admin' => true]);
        $this->be($user);  // 模擬user已經登入

        // 產生 middleware 實例
        $middleware = new AdminMiddleware;
        // 執行handle()
        $response = $middleware->handle(request(), function() {});
        
        // assertion
        $this->assertEquals(null, $reponse);
    }
}

個人覺得困難點是要測什麼？以middleware來說，它的handle()函數，預設只有一行，return $next($request);，就是程式繼續往下執行，前面沒有任何檢核、阻擋、轉換，當然囉，這是自定義的middleware，當然要自己寫。

class AdminMiddleware
{
    public function handle($request, Closure $next)
    {
        if (! auth()->user()->is_admin) {
            // 非管理者重導向首頁
            return redirect('/');
        }

        // 請求可以繼續
        return $next($request);
    }
}

第一個測試的使用者是管理員，所以上方的AdminMiddleware是執行return $next($request); ，對於測試檔案中$response接收到的會是null，故assertion測試它等於null值表示通過。

非管理者會被重導向首頁，要如何測試答案是 return redirect(‘/’);

public function test_非管理者須被重新導向首頁()
{
    $user = factory(App\User::class)->create(['is_admin' => false]);
    $this->be($user);

    $middleware = app(AdminMiddleware::class);  // 實例化的另一種寫法
    $response = $middleware->handle(request(), function() {});

    // assertion
    $this->assertEquals(302, $response->getStatusCode());
}

$reponse所接收的回應(redirect(‘/’))，其狀態碼等於302，所以就測302囉。

period。外國人吵架結束。

Vuex – Counter add number example

範例來自 codecourse.com

延續上一個例子，加入數字到state.numbers陣列。可以透過mutations或是actions，兩者的差別在於，前者為『synchronize』、後者為『asychronize』，重點在別直接變更state，而是間接透過mutations或actions。

#1 建立加入數字按鈕元件 (commit mutations)

// src/components/AddNumber.vue
<template>
  <a href="#" @click.prevent="add">加入隨機數字</a>
</template>

export default {
  name: 'add-number',
  methods: {
    add () {
      // 透過mutations
      this.$store.commit('addNumber', Math.floor(Math.random() * (100 - 1) + 1))
    }
  }
}