vue项目token放在哪里_vue中的使用token的方法示例

初始于登录页面

Home.vue

// @ 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))

}

}

About.vue

This is an about page

login.vue

:model="model"

:schema="schema"

@submit.prevent="handleLogin"

@validate="handleValidate"

>

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

});

}

}

};

/service/user

import axios from "axios";

export default {

login(user) {

return axios.get("/api/login", { params: user })

.then(({ data }) => data);

}

};

App.vue

Home |

About

注销

export default {

methods: {

logout() {

this.$store.dispatch('logout')

}

},

}

#app {

font-family: "Avenir", Helvetica, Arial, sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

text-align: center;

color: #2c3e50;

}

cube-ui组件的引用 cube-ui.js

import Vue from 'vue'

// By default we import all the components.

// Only reserve the components on demand and remove the rest.

// Style is always required.

import {

/* eslint-disable no-unused-vars */

Style,

// basic

Button,

Loading,

Tip,

Toolbar,

TabBar,

TabPanels,

// form

Checkbox,

CheckboxGroup,

Checker,

Radio,

RadioGroup,

Input,

Textarea,

Select,

Switch,

Rate,

Validator,

Upload,

Form,

// popup

Popup,

Toast,

Picker,

CascadePicker,

DatePicker,

TimePicker,

SegmentPicker,

Dialog,

ActionSheet,

Drawer,

ImagePreview,

// scroll

Scroll,

Slide,

IndexList,

Swipe,

Sticky,

ScrollNav,

ScrollNavBar

} from 'cube-ui'

Vue.use(Button)

V