vue中的使用token的方法示例

2020-06-16 06:55:57易采站长站整理

初始于登录页面

Home.vue


<template>
<div class="home">
</div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import axios from 'axios';

export default {
name: 'home',
components: {
HelloWorld
},
created(){
axios.get('/api/userinfo').then(res=>console.log(res.data))
}
}
</script>

About.vue


<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>

login.vue


<template>
<div>
<div class="logo">
<img src="https://img.kaikeba.com/logo-new.png" alt>
</div>
<!-- <cube-button>登录</cube-button> -->
<cube-form
:model="model"
:schema="schema"
@submit.prevent="handleLogin"
@validate="handleValidate"
></cube-form>
</div>
</template>

<script>
export default {
data() {
return {
model: {
username: "",
password: ""
},
schema: {
fields: [
{
type: "input",
modelKey: "username",
label: "用户名",
props: { placeholder: "请输入用户名" },
rules: {
required: true
},
trigger: "blur"
},
{
type: "input",
modelKey: "password",
label: "密码",
props: {
placeholder: "请输入密码",
type: "password",
eye: { open: true }
},
rules: {
required: true
},
trigger: "blur"
},
{
type: "submit",
label: "登录"
}
] }
};
},
methods: {
handleValidate(ret) {
console.log(ret);
},
handleLogin(e) {
// 登录请求
this.$store.dispatch("login", this.model).then(success => {
if (success) {
const path = this.$route.query.redirect || '/'
this.$router.push(path)
}
}).catch(error => {
const toast = this.$createToast({
time:2000,
txt:'登录失败',
type:'error'
}).show();
});
}
}
};
</script>

<style scoped>
</style>

/service/user


import axios from "axios";

export default {
login(user) {
return axios.get("/api/login", { params: user })
.then(({ data }) => data);
}
};

App.vue