Vue Abp vNext用戶登錄（Cookie）

因為Abp vNext沒找到Vue的模板，網上也沒找到相關vNext的例子，只能自己試着寫寫，asp.net core abp vue都是剛學不久，所以很粗糙也可能有錯誤的地方，如果您看到請指正，謝謝

一、新建Vue項目，為了方便我是用vue ui方式建的，增加了element(樣式),axios(ajax提交),router(路由),vuex(狀態管理，暫時不會)，代碼盡量已經把注釋寫入

二、main.js中引入相關包

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
//引入element樣式包
import './plugins/element.js'
//引入Axios ajax交互用
import Axios from "axios";

Vue.config.productionTip = false
//Axios設置為全局變量
Vue.prototype.$axios = Axios;
//提交header中包含cookies,Abp vNext必須
Axios.defaults.withCredentials= true;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

三、修改App.vue文件為以下代碼

<template>
  <div id="app">
    <router-view/>  <!--路由視圖-->
  </div>
</template>

<script>
export default {
 name: 'app'
}
</script>

 <style> </style>

四、創建Login.vue登錄頁

<template>
    <div>
        <!-- element ui表單
        詳細信息請查看 https://element.faas.ele.me/#/zh-CN/component/form
        -->
        <el-row>
            <el-col :span="5">
                <el-form :model="form" label-width="100px">
                    <el-form-item label="用戶名">
                        <el-input v-model="form.userNameOrEmailAddress"></el-input>
                    </el-form-item>
                    <el-form-item label="密碼">
                        <el-input type="password" v-model="form.password" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-checkbox v-model="form.rememberMe">記住我</el-checkbox>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submit" style="width: 100%">提交</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>
<script>
    //引入路由
    import router from "../router";

    export default {
        name: 'Login',
        data() {
            return {
                //表單名
                form: {
                    userNameOrEmailAddress: '',
                    password: '',
                    rememberMe: true
                }
            };
        },
        methods: {
            submit() {
                this.$axios.post('https://localhost:44327/api/account/login', this.form)
                    .then(res => {
                            if (res.data.result == 1) {
                                //登錄成功提示
                                this.$message({
                                    message: '登錄成功',
                                    type: 'success'
                                });
                                //登錄成功后跳轉頁面
                                router.push('About')
                            } else if (res.data.result == 2) {
                                //登錄失敗提示
                                this.$message({
                                    message: '登錄失敗! ' + res.data.description,
                                    type: 'error'
                                });
                            }
                        }
                    )
                    .catch(() => {
                            this.$message({
                                message: '未知錯誤',
                                type: 'error'
                            });
                        }
                    )
            }
        }
    }
</script>

登錄成功與失敗提示

五、登錄成功后測試查詢用戶

<template>
    <div>
        <el-button @click="btnGetUser">查詢用戶</el-button>
        <el-button @click="btnExit">退出登錄</el-button>
        <hr/>
        {{userInfo}}
    </div>
</template>
<script>
    import router from "../router";
    export default {
        data(){
            return{
                userInfo:[]
            }
        },
        methods: {
            btnGetUser: function () {
                this.$axios.get('https://localhost:44327/api/identity/users')
                    .then(response => {
                        this.userInfo = response.data.items;
                    })
                    .catch(() => {
                        this.$message({
                            message: '登錄失敗或權限不足',
                            type: 'error'
                        });
                    })

            },
            btnExit: function () {
                this.$axios.get('https://localhost:44327/api/account/logout')
                    .then(() => {
                        this.$message({
                            message: '退出成功',
                            type: 'success'
                        });
                        router.push('/')
                    })
            }
        }
    }
</script>

查詢成功

如果沒有權限或沒有登錄，查詢失敗提示

補充根據錯誤碼報錯

            btnGetAllUser() {
                this.$axios.get('https://localhost:44336/api/identity/users')
                    .then(res => {
                        console.log(res)
                    }).catch(error => {
                    switch (error.response.status) {
                        case 401:
                            this.$route.push('/Login')
                            break;
                        case 403:
                            this.$message.error('權限不足！');
                            break;
                        case 404:
                            this.$message.error('發出的請求針對的是不存在的記錄，服務器沒有進行操作！');
                            break;
                        case 500:
                            this.$message.error('服務器發生錯誤，請檢查服務器！');
                            break;
                        default:
                            this.$message.error('其他錯誤！')
                            break;
                    }
                })
            }