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);
                });
            }

效果展示