vue+axios 前端实现登录拦截（路由拦截、http拦截）

vue+axios 前端实现登录拦截（路由拦截、http拦截）

在项目中，有些页面往往需要登录后才可以浏览，那么我们可以通过路由拦截进行处理

在vue.config.js中配置代理，解决前端浏览器的跨域问题

devServer: {
overlay: {
warnings: false,
errors: false
},
open:true, //自动开启浏览器
port:8000, //端口号设置
proxy: {   //配置代理  解决前端浏览器的跨域问题
'/info': {
target: 'http://47.96.0.211:3000',  //目标请求的域名地址
changeOrigin:true,               //是否改变
pathRewrite:{                    //重写地址
"^/info":""
}
}
}
},

我们可以单独建一个http.js的文件，对拦截进行封装

请求之前的拦截 一般可以在发送请求给后端的时候，携带一些数据给他们
响应之后的拦截 可以根据响应后的不同的状态码进行判断分析，给前端返回不同的符和条件的数据

//关联之前的域名地址
const instance2 = axios.create({
baseURL: '/info',
})

//在发生请求之前做一个拦截操作
instance2.interceptors.request.use(config=>{
// 只要调用此接口的地方，就在他的请求头上面携带token发送给后端
if(localStorage.getItem("token")){
config.headers['X-Access-Token'] = localStorage.getItem("token")
}
return config
})

//获取数据后，后端给我们进行响应，做一个拦截，根据返回的状态码进行业务逻辑实现，从而给前端返回不同的数据内容。
instance2.interceptors.response.use(res=>{
if(res.data.flag){ //代表后端成功响应结果了
return res.data.data
}else{
return Promise.reject("出错了...")
}
})

在登录页面login.vue

methods:{
login(){
instance2.post("/api/user/loginin",{
username:"admin",
password:123
}).then(res=>{
//登录成功后，需要将后端返回的token令牌放入到本地存储里面
localStorage.setItem("token",res.token)
//跳转到个人中心
this.$router.push("/center")
}).catch(err=>{
//如果登录不成功，输出错误提示
console.log(err)
})
}
}

个人中心center.vue设置

//个人中心内部beforeRouteEnter进行组件内部的路由守卫的拦截，进入组件之前先判断本地存储是否有token令牌，发现如果本地存储里面有了token令牌了，那么就next() , 否则 next("/login")
beforeRouteEnter(to,from,next){
if(localStorage.getItem("token")){
next()
}else{
next("/login")
}
},
created(){
//进行接口请求，为了检测token是否处于失效状态
instance2({
method:"post",
url:"/api/user/isloginin",
}).then(res=>{
console.log("centerres-->",res)
}).catch(err=>{ //token已经失效了，需要跳转到登录界面进行重新登录
this.$router.push("/login")
})
}