前端访问OAuth2授权服务器

前端必须要提交：

username: “” 用户账号

password: “” 用户密码

grant_type: ‘password’ （一般固定是password）

client_id: ‘appid’ （这些值都是后端写死的）

client_secret: ‘223344’（这些值都是后端写死的）

<template>
	<!-- 这里定义vue组件的模板内容 -->
	<div>
		<h2>登录首页</h2>
		<p>username:<input type="text" v-model="login.username" /></p>
		<p>password:<input type="text" v-model="login.password" /></p>
		<hr>
		<button @click="dologin">登录</button>
		<router-view></router-view>
	</div>
</template>

<script>
	// 这里定义vue组件的业务逻辑
	export default {
		//参数
		props: {},
		//私有数据
		data() {
			return {
				login: {
					username: "",
					password: "",
					grant_type: 'password',
					client_id: 'appid',
					client_secret: '223344',
				}
			}
		},
		methods: { //处理函数
			//其它业务处理
			dologin() {
				let param = "username=" + this.login.username + "&";
				param += "password=" + this.login.password + "&";
				param += "grant_type=" + this.login.grant_type + "&";
				param += "client_id=" + this.login.client_id + "&";
				param += "client_secret=" + this.login.client_secret;
				var that = this;
				this.$axios({
					url: "http://192.168.117.34:8080/oauth/token",
					method: 'post',
					data: param
				}).then(function(resp) {
					localStorage.setItem('token',resp.data.access_token);
					resp.data.access_token
					console.log(resp);
					console.log(resp.data);
				
				}).catch(function(err) {
					console.log(err);
				})
			}
		},
		mounted() {
			//预加载
		}
	}
</script>

<template>
    <!-- 这里定义vue组件的模板内容 -->
	<div>
		<h2>学生首页</h2>
		<hr>
		<button>添加学生</button>
		<!-- <router-view></router-view> -->
		<button @click="goApiStuX">获取学生</button>
	</div>
</template>

<script>
   // 这里定义vue组件的业务逻辑
    export default{
        //参数
        props:{},
        //私有数据
        data(){
            return{
				
			}
        },
        methods:{//处理函数
           //其它业务处理
		   goApiStuX(){
			   let token=localStorage.getItem('token');
			   console.log(token);
			   this.$axios({
				   url:"http://192.168.117.34:8080/api/stu/hello",
				   headers:{
					   Authorization:"Bearer "+token
				   }
			   }).then(function(resp){
				   console.log(resp);
				   console.log(resp.data);
			   })
		   }
        },
        mounted () {
           //预加载
        }
    }
</script>