---
# System prepended metadata

title: AUTH 建立後台-5/7
tags: [Laravel, Limo, AUTH, 後端]

---

# AUTH 建立後台-5/7 

###### tags: `Laravel` `後端` `Limo` `AUTH` 


老師影片檔👇
https://drive.google.com/drive/u/0/folders/1XamGM8RHa8q035dTLlHTPlObBrArZcXj

### 01 開始安裝

1. 執行以下程式碼安裝套件

    :::info
    composer require laravel/ui:^2.4
    :::

2. 放UI//執行UI VUE

    :::info
    php artisan ui vue --auth
    :::

    ![](https://i.imgur.com/8Qb04FK.png)


3. 根據指令輸入
    :::info
    npm install
    :::

    ![](https://i.imgur.com/I4eQx3M.png)
    
    執行編譯動作
    :::info
    npm run dev
    :::

    ![](https://i.imgur.com/Amc9oH6.png)
    
    🍋npm run dev 使CSS JS編譯並放入PUBLIC資料夾
    在根目錄中webpack.mix.js中進行,連結類似於WatchingSass
    ```php=
    mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

    ```
    因此當有新的SASS請到webpack.mix.js手動加入

### 02 檢視首頁變化(當然是因為view有了變化)

:::info
php artisan serve
:::

1. 首頁右側出現:
![](https://i.imgur.com/eErUZFH.png)

2. 登入(http://127.0.0.1:8000/login):
![](https://i.imgur.com/xgic7ak.png)
3. 註冊(http://127.0.0.1:8000/register):
![](https://i.imgur.com/CZKmAlE.png)
4. 忘記密碼(http://127.0.0.1:8000/password/reset):
![](https://i.imgur.com/P9evcZM.png)

### 03 檢視VSCODE變化

1. \routes\web.php出現:
![](https://i.imgur.com/PGEPyQo.png)

* :::danger
  請在Auth上面(Z軸)右鍵:import Auth class 
  使上方引入 use Illuminate\Support\Facades\Auth;

  
* 可輸入指令檢視路由表單
    :::info
    php artisan route:list
    :::
    ![](https://i.imgur.com/LDN2ySB.png)

2. 產生新的CONTROLLER與MIDDLEWARE

    1. app\Http\Controllers\Auth
       控制各種會員功能(註冊,登入等)
       
    3. app\Http\Middleware
       控制使用者流向(如沒登入不得進入後台)
       
### 04 檢視資料表變化
1. 產生新的migrations

    users(本來就有)儲存使用者身份用,可以魔改增加使用者身分並修改預設值
       
```php=
           public function up()
    {
        Schema::create('users', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('email')->unique();
            $table->timestamp('email_verified_at')->nullable();
            $table->string('password');
            $table->rememberToken();
            $table->timestamps();
            //增加這個👇
            $table->string('role')->default('administer');
        });
    }
```
       

       
2. 增加了password_resets(應該是重設密碼用?
   記得輸入php artisan migrate 建立表單

### 05 檢視其他變化

||新增|位置/檔案|
|-|-|-|
||layout|app.layout.blade.php|
|||👆app.layout是後台的模板樣式|
||js|resources\js\app.js|
|||👆app.js裡面寫的vue會造成機器人檢核器出錯|
||sass|resources\sass\app.scss|
||vue|resources\js\components\ExampleComponent.vue|

