项目开发的时候没有使用已有的框架,自己搭建了一个,所以拦截器和路由守卫也要自己搭建
步骤
第一步:在src根目录下新建http.js文件,设置请求拦截器和路由守卫
http.js文件内容
import axios from 'axios';
import router from './router';
import {setCookie,getCookie} from "@/cookie.js"
import store from './store'
// axios 配置
axios.defaults.timeout = 8000;
axios.defaults.baseURL = global.BASE_URL;
// http request 拦截器
axios.interceptors.request.use(
config => {
if(config.url =="http://192.168.22.52:8081/auth-web/access/login"){
return config;
}else{
if (store.state.Authorization) { //判断token是否存在
config.headers.Authorization =getCookie(); //将token设置成请求头
}
return config;
}
},
err => {
return Promise.reject(err);
}
);
// http response 拦截器
axios.interceptors.response.use(
response => {
if (response.data.errno === 999) {
router.replace('/');
console.log("token过期");
}
return response;
},
error => {
return Promise.reject(error);
}
);
/**
* 请求失败后的错误统一处理
* @param {Number} status 请求失败的状态码
*/
const errorHandle = (status, other) => {
// 状态码判断
switch (status) {
// 401: 未登录状态,跳转登录页
case 401:
toLogin();
break;
// 404请求不存在
case 404:
message.error('请求的资源不存在',5);
break;
default:
console.log(other);
}};
// //路由守卫
router.beforeEach((to, from, next) => {
if(from.name == "Login"){ // 如果不需要权限校验,直接进入路由界面
next();
}else if(to.meta.requireAuth){
// 判断该路由是否需要登录权限
if (store.state.Authorization) { // 获取当前的token是否存在
console.log("token存在");
next();
} else {
console.log("token不存在");
next({
path: '/login', // 将跳转的路由path作为参数,登录成功后跳转到该路由
query: {redirect: to.fullPath}
})
}
}else { // 如果不需要权限校验,直接进入路由界面
next();
}
});
export default axios;
第二步:在src根目录下新建store文件夹和Index.js文件
首先安装vuex
npm install vuex --save
Index.js文件内容
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
// const a=123;
const store = new Vuex.Store({
state: {
// 存储token
Authorization: localStorage.getItem('Authorization') ? localStorage.getItem('Authorization') : ''
},
mutations: {
// 修改token,并将token存入localStorage
changeLogin (state, user) {
state.Authorization = user.Authorization;
localStorage.setItem('Authorization', user.Authorization);
}
}
});
export default store;
第三步:在src根目录下新建cookie.js文件
function setCookie(token){
document.cookie = token;
}
function getCookie(){
return document.cookie;
}
export{setCookie,getCookie}
第四步:在main.js中引入store和http.js
//增加拦截器
import http from './http'; //此处问http文件的路径
Vue.prototype.$http = http;
//引入store
import store from './store'
new Vue({
el: '#app',
store,//增加store
router,
components: { App },
template: ' '
})
第五步:在组件中使用
登陆中在缓存储存token
setCookie(res.data.data.token); // 将获取的token存入cookie.js
localStorage.setItem("Authorization", res.data.data.token);
store.state.Authorization=res.data.data.token;
原文链接:https://blog.csdn.net/yujing1314/article/details/101679653