Vue獲取Abp VNext Token

Abp VNext默認沒公開訪問Token的Api，但有個問題Cookie方式如果是手機或桌面程序不如Token方便

Axios默認是Json方式提交，abp登錄需要使用application/x-www-form-urlencoded方式提交

首先引入Axios

import Axios from "axios"
Vue.prototype.$axios = Axios
//api訪問基址
Axios.defaults.baseURL = 'https://localhost:44364'

Vue的Data數據

        data() {
            return {
                form: {
                    grant_type: 'password',
                    scope: 'Mall',
                    username: 'admin',
                    password: '1q2w3E*',
                    client_id: 'Mall_App',
                    client_secret: '1q2w3e*'
                },
                rememberMe: false
            }
        }

顯示布局

        <el-form ref="form" label-width="80px">
            <el-form-item label="用戶名：">
                <el-input v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label="密碼：">
                <el-input type="password" v-model="form.password"></el-input>
            </el-form-item>
            <el-form-item>
                <el-checkbox v-model="rememberMe">記住我</el-checkbox>
            </el-form-item>
            <el-button type="primary" @click="btnLogin">Login</el-button>
        </el-form>

按鈕登錄事件

            btnLogin() {
                //QS使用的目的
                //正常用Json方式提交
                //將對象序列化A=1&b=2&c=3這種方式提交
                var qs = require('qs');
                this.$axios.post('/connect/token', qs.stringify(this.form), {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                }).then(response => {
                    console.log(response)
                    // this.$router.push('/') 跳轉
                    if (this.rememberMe == true) {
                        //如果記住我打鈎將token保存在本地
                        // sessionStorage.setItem('access_token', response.data.access_token)//保存為本次會話
                        // localStorage.setItem('access_token', response.data.access_token);//永久保存，直到瀏覽器清除緩存
                        // 想用cookie保存需要引入vue-cookies
                        // import Vue from 'vue'
                        // import VueCookies from 'vue-cookies'
                        // Vue.use(VueCookies)
                        // 設置一個cookie
                        // this.$cookies.set(keyName, value[, expireTimes[, path[, domain[, secure]]]])
                    }
                }).catch(error => {
                    console.log(error.response);
                });
            }

效果展示