vue axios的拦截器配合路由守卫实现前端鉴权认证登录

axios 的拦截器配合路由守卫实现前端鉴权认证登录

配置反向代理解决跨域问题

vue.config.js

devServer: {
        proxy:{ //代理
          "/info":{
            target:"http://47.96.0.211:3000",
            changeOrigin:true,
            pathRewrite:{
              "^/info":""
            },
          }
        }
    }

封装 axios 拦截器

utils/http.js

//针对于上线的 http://47.96.0.211:3000
const instance2 = axios.create({
    baseURL: '/info'
})
//请求之前的拦截操作
instance2.interceptors.request.use(
    config => {
        if(localStorage.getItem("token")){ //如果token存在
            config.headers.token = localStorage.getItem("token")	将token携带过去
        }
        return config
    }
)
//响应之后的拦截操作
instance2.interceptors.response.use(res=>{
    if(res.data.err === 0){ //说明后端给我们前端返回的结果是正常的
        return res.data
    }else{
        return Promise.reject(res.data.msg)	//返回一个异常
    }
})
export {instance,instance2}	//导出

登录成功后，将token存入到LocalStorege中

login(){
    instance2.post("/api/login",{	//反向代理
        username:"李四",
        password:"123"
    }).then(res=>{
        console.log(res)
        localStorage.setItem("token",res.token)	//将token保存到本地存储里面去
        this.$router.replace("/center")	//跳转到个人中心
    })
}

进行路由守卫的拦截登录

//判断每次路由切换的时候，是否有token令牌
router.beforeEach((to,from,next)=>{
  if(to.path === "/center"){
    if(localStorage.getItem("token")){//说明用户已经登录了
      next()
    }else{
      next("/login") //如果用户没有登录直接跳转到登录界面进行用户登录
    }
  }else{
    next()
  }
})

后续我们这里肯定是可以进行登录了，可以访问center了。但是后续例如Films里面有一个请求，需要每次请求的时候验证token是否携带或者token是否失效，这样的话我们写的axios拦截就用到了。

Films.vue

created(){
        //要请求 http://47.96.0.211:3000/api/goods/home数据
        //这个请求就可以验证了axios拦截器的作用了！
        instance2.get("/api/goods/home").then(res=>{
            //登录的时候，然后再去请求这个home数据，那么请求拦截器上面就做请求拦截判断，接下来就会在header上面携带token发送给后端，然后后端OK了，就会触发then打印数据了。
            console.log("/goods/home的数据",res)
        }).catch(err=>{
          //默认未登录的时候，请求头上面没有携带token令牌发给后端，所以响应拦截里面返Promise.reject(res.data.msg)，然后触发其catch捕获错误信息。
            console.log("err",err)
        })
    }

以上就是个人总结，如有不对，欢迎指出~