- 安装 js-cookie
npm install js-cookie -s
在src下面创建utils文件夹,并创建auth.js文件
import Cookies from 'js-cookie'
const TokenKey = 'token'
export function getToken() {
return Cookies.get(TokenKey)
}
export function setToken(token) {
return Cookies.set(TokenKey, token)
}
export function removeToken() {
return Cookies.remove(TokenKey)
}
使用vuex调用回来token
import Vue from 'vue'
import Vuex from 'vuex'
import {setToken} from '../utils/auth'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
token:undefined,
},
getters:{
getToken:state=>{
return state.token;
},
},
mutations: {
SET_TOKEN(state,token){
console.log(token)
setToken(token)
state.token=token;
},
},
actions: {
}
})
export default store;
在同目录下创建request.js文件
import axios from 'axios'
import { getToken } from './auth.js'
import { MessageBox, Message } from 'element-ui'
import store from '../store/index'
const service = axios.create({
//代理地址
baseURL: "/api/", // url = base url + request url
// withCredentia//ls: true, // send cookies when cross-domain requests
timeout: 5000 // request timeout
})
service.interceptors.request.use(
config => {
// do something before request is sent
if (store.getters.getToken) {
// let each request carry token
// ['X-Token'] is a custom headers key
// please modify it according to the actual situation
config.headers['Authorization'] = "Bearer " + getToken()
}
return config
},
error => {
// do something with request error
console.log(error) // for debug
return Promise.reject(error)
}
)
// response interceptor
service.interceptors.response.use(
/**
* If you want to get http information such as headers or status
* Please return response => response
*/
/**
* Determine the request status by custom code
* Here is just an example
* You can also judge the status by HTTP Status Code
*/
response => {
const res = response.data
// if the custom code is not 20000, it is judged as an error.
if (res.status === 10004 || res.status === 10003) {
// to re-login
MessageBox.confirm('您已经登出,您可以取消停留在此页面或再次登录', '确认登出', {
confirmButtonText: '重新登录',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// store.dispatch('user/resetToken').then(() => {
// location.reload()
// })
})
} else if (res.status === 403) {
Message({
message: res.msg || '操作失败',
type: 'error',
duration: 3 * 1000
})
return Promise.reject(new Error(res.msg || '操作失败'))
} else if (res.status !== 200) {
Message({
message: res.msg || '操作失败',
type: 'error',
duration: 3 * 1000
})
// 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
return Promise.reject(new Error(res.msg || '操作失败'))
} else {
return res
}
},
error => {
console.log('err' + error) // for debug
let { message } = error;
if (message == "Network Error") {
message = "后端接口连接异常";
} else if (message.includes("timeout")) {
message = "系统接口请求超时";
} else if (message.includes("Request failed with status code")) {
message = "系统接口" + message.substr(message.length - 3) + "异常";
}
Message({
message: message,
type: 'error',
duration: 3 * 1000
})
return Promise.reject(error)
}
)
export default service
以下是若要登录获取token需要的配置
我将所需要的接口都放在了api文件夹中,api文件夹自己创建的
在src/api/home.js中
后端给予的接口
import request from '../utils/request'
let qs = require("qs")
export function login(data) {
return request({
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
url: '/auth/login',
method: 'post',
data: qs.stringify(data)
})
}
qs.stringify为将json转换为formdata
或者用
const params = new FormData();
params.append('username', this.loginForm.username);
params.append('password', this.loginForm.password);
在app.js中调用或者在home.js中调用
import * as home from './api/home.js'
created () {
this.login();
},
methods: {
login() {
home.login({username: 'admin',password:'admin'}).then(res => {
// res返回token并传到vuex中保存
this.$store.commit("SET_TOKEN",res.data.access_token);
this.$router.push("/home")
})
}
}