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")
        })
    }