後臺管理模組增加登入驗證，與入口網站一樣都是採用無狀態登入。

一、新增全域性函式

在main.js中新增使用者驗證：

二、修改路由

先顯示登入頁面

效果：

三、解決cookie寫入問題

在http.js中新增配置：

四、登入

Login.vue

<template>
  <v-app>
    <v-content>
      <v-container fluid fill-height>
        <v-layout align-center justify-center>
          <v-flex xs12 sm8 md4>
            <v-card class="elevation-12">
              <v-toolbar dark color="primary">
                <v-toolbar-title>樂優商城後臺管理</v-toolbar-title>
                <v-spacer></v-spacer>
              </v-toolbar>
              <v-card-text>
                <v-form>
                  <v-text-field prepend-icon="person" v-model="username" label="使用者名稱" type="text"/>
                  <v-text-field
                    prepend-icon="lock"
                    v-model="password"
                    label="密碼"
                    id="password"
                    :append-icon="e1 ? 'visibility' : 'visibility_off'"
                    :append-icon-cb="() => (e1 = !e1)"
                    :type="e1 ? 'text' : 'password'"
                 ></v-text-field>
                </v-form>
              </v-card-text>
              <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="primary" @click="doLogin">登入</v-btn>
              </v-card-actions>
            </v-card>
          </v-flex>
        </v-layout>
      </v-container>
    </v-content>
    <v-dialog v-model="dialog" width="300px">
      <v-alert icon="warning" color="error" :value="true">
      使用者名稱和密碼不能為空
      </v-alert>
    </v-dialog>
  </v-app>
</template>

<script>
  export default {
    data(){
      return{
        username: '',
        password: '',
        dialog: false,
        e1:false,
        backPath:''
      }
    },
    beforeRouteEnter(to,from,next){
      next(vm => {
        vm._data.backPath = from.path;
      });
    },
    methods: {
      doLogin() {
        if (!this.username || !this.password) {
          this.dialog = true;
          return false;
        }
        const form ={};
        form.username = this.username;
        form.password = this.password;

        this.$http.post("/auth/accredit", this.$qs.stringify(form)).then(resp =>{
          if (resp.status === 200){
             //頁面跳轉

            if (this.backPath === "/"){
              this.$router.push("/index/dashboard");
            } else {
              this.$router.push(this.backPath);
            }

          }
        }).catch();
      }
    }
  };
</script>
 

使用beforeRouteEnter獲取跳轉到登入頁面的路徑，登入成功後以便跳轉到原來的頁面

五、使用者校驗

模板：

      this.verify().then(() => {
        //TODO

      }).catch(() => {
        this.$router.push("/login");
      });

所有CRUD操作之前都進行使用者登入驗證。