34. vue 路由拦截,路由跳转权限,登录权限

//App.vue中method中判断
export default {
  name: 'App',
  provide(){
  // 给深层次组件声明变量,然后inject注入
  //在App.js中个定义,在其他页面通过注入inject: ["reload"],在通过路由导航来拦截没有权限的页面跳回之前的页面实现刷新当前页面
  //export default {
   // inject: ["reload"],
   // name: "",
   // props: [""],
  //}
    return{
      reload:this.reload  
    }
  },
  data() {
    let self = this;
    return {
      isRouterAlive:true,
      lastTime: new Date().getTime(), //最后一次点击的时间
      currentTime: new Date().getTime(), //当前点击的时间
      timeOut: 30 * 60 * 1000, //设置超时时间： 30分钟
      isrouteralive: true, //  给全局需要单页刷新用
      lng: "",
      lat: "",
      center: [121.59996, 31.197646],
      lng: 0,
      lat: 0,
      loaded: false,
      plugin: [
        {
          enableHighAccuracy: false,
          convert: false, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
          showButton: false, //显示定位按钮，默认：true
          showMarker: false, //定位成功后在定位到的位置显示点标记，默认：true
          showCircle: false, //定位成功后用圆圈表示定位精度范围，默认：true
          panToLocation: false, //定位成功后将定位到的位置作为地图中心点，默认：true
          zoomToAccuracy: false, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：f
          pName: "Geolocation",
          events: {
            init(o) {
              // o 是高德地图定位插件实例
              o.getCurrentPosition((status, result) => {
                // console.log("自动定位", result);
                if (result && result.position) {
                  // self.lng = result.position.lng;
                  // self.lat = result.position.lat;
                  // self.center = [self.lng, self.lat];0
                  localStorage.setItem("lng", result.position.lng);
                  localStorage.setItem("lat", result.position.lat);
                  localStorage.setItem(
                    "center",
                    JSON.stringify([result.position.lng, result.position.lat])
                  );
                  localStorage.setItem("city", result.addressComponent.city);
                  self.getcitycode(result.addressComponent.city)
                  self.loaded = true;
                  self.$nextTick();
                }
              });
            }
          }
        }
      ],
      // //即时通讯
      // selToID : '', //当前选中聊天id（当聊天类型为私聊时，该值为好友帐号，否则为群号）wdncqsv88lwqshge
      // selSess : '', //当前聊天会话对象
      // loginInfo : {
      //     sdkAppID: '1400199451', //用户所属应用id,必填
      //     accountType: '36862', //用户所属应用帐号类型，必填
      //     identifier: '', //当前用户ID,必须是否字符串类型，必填 4qlver84w5jjd5rw
      //     userSig: '',//当前用户身份凭证，必须是字符串类型，必填
      //     identifierNick: '', //当前用户昵称，不用填写，登录接口会返回用户的昵称，如果没有设置，则返回用户的id
      //     headurl: '' //当前用户默认头像，选填，如果设置过头像，则可以通过拉取个人资料接口来得到头像信息
      // },
    };
    
    
  },
  created() {
    this._isMobile();
    // this.lastTime = new Date().getTime(); //网页第一次打开时，记录当前时间
  },

  methods: {
    isDo() {
      let flag = this._isMobile() ? 1 : 0; // 得到flag的值，判断PC端还是Mobile端,1是Mobile端，0是PC端
      this.lastTime = new Date().getTime(); //记录这次点击的时间
    },
    tTime() {
        this.currentTime = new Date().getTime()
        //判断上次最后一次点击的时间和这次点击的时间间隔是否大于30分钟
        // 登录状态过期后，清空本地PC端和mobile端缓存信息
        if (this.currentTime -this.lastTime > this.timeOut) {
          localStorage.removeItem("ms_userinfo");
          sessionStorage.removeItem("ms_token");
          // this.$router.push('/login')
        }
    },

    reload() {
      // 页面数据变换时，手动更改view层的隐藏显示，实现刷新效果
      this.isrouteralive = false;
      this.$nextTick(() => {
        this.isrouteralive = true;
      });
    },
    _isMobile() {
      let flag = navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      );
      localStorage.setItem("ismobile", flag ? 1 : 0);
      return flag;
    },
    map() {
      let that = this;
      let map = new BMap.Map(this.$refs.allmap); // 创建Map实例
      var point = new BMap.Point(114.42671, 30.486372);
      map.centerAndZoom(point, 12); // 初始化地图,设置中心点坐标和地图级别
      var marker = new BMap.Marker(point); // 创建标注
      map.addOverlay(marker);
      var geolocation = new BMap.Geolocation();
      geolocation.getCurrentPosition(function(r) {
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
          var mk = new BMap.Marker(r.point);
          that.$store.state.cityL = r.address.city.slice(
            0,
            r.address.city.length - 1
          );
          that.$store.state.cityInfo = r.address;

          localStorage.setItem("lng", r.point.lng);
          localStorage.setItem("lat", r.point.lat);
          // map.addOverlay(mk);   //添加标注
          that.getcitycode(r.address.city);
          localStorage.setItem("city", r.address.city);
          // map.panTo(r.point);  //定位居中显示

          alert("您的位置：" + r.point.lng + "," + r.point.lat);
        } else {
          // alert('failed'+this.getStatus());
        }
      });
      // map.setCurrentCity("北京");// 设置地图显示的城市 此项是必须设置的
      map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
      // 获取定位城市
      let myCity = new BMap.LocalCity();
      myCity.get(function(result) {
        console.log("result", result);
        map.setCenter(result.name);
        that.$store.state.city = result.name.slice(0, result.name.length - 1);
        that.$store.state.cityLocal = result;
        localStorage.getItem("lng") ||
          localStorage.setItem("lng", result.center.lng);
        localStorage.getItem("lat") ||
          localStorage.setItem("lat", result.center.lat);
        // console.log(that.$store.state.cityInfo)
        that.getcitycode(result.name);
      });
      // map.addEventListener('click',(e)=>{
      //     console.log('e',e)
      // })
    },
    getcitycode(val) {
      // this.$http.post('/mobile/index/citycode',{
      //     city:val,
      // }).then(res=>{
      //     localStorage.setItem('citycode',res.data.result.code)
      // })
    }
  },
  mounted() {
    // this.map()  //百度地图
     window.setInterval(this.tTime, 1000);
  }
};

 //判断是否需要登录权限 以及是否登录
//requireAuth:true  设置在router/index.js路由meta中，用于路由拦截钩子判断该页面组件是否需要登录获取进入权限
router.beforeEach((to, from, next) => {
  if (to.matched.some(res => res.meta.requireAuth)) {// 判断是否需要登录权限,路由中定义的字段requireAuth
    if (localStorage.getItem('username')) {// 判断是否登录
      if (to.meta.title) {//在路由跳转时做相应的处理(替换title)
        document.title = to.meta.title;
      }
      next()
    } else {// 没登录则跳转到登录界面
      next({
        path: '/login',
        query: {redirect: to.fullPath}
      })
    }
  } else {
    next()
  }
})

/**
 * Created by jerry on 2019/5/6.
 */
//npm install --save axios
//npm install --save qs
import axios from 'axios'
import router from '../router'

//添加一个请求拦截器
axios.interceptors.request.use(
    // 请求拦截
    function (config) {
        // 将token给到一个前后台约定好的key中，作为请求发送
        let token;
        if (ismobile == 1) {
            token = sessionStorage.getItem("ms_token");
        }
        if (token) {
            config.data["token"] = token;
        }
        return config;
    },
    function (error) {
        return Promise.reject(error);
    }
);

// 添加一个响应拦截器
myAxios.interceptors.response.use(res => {
    if (res.data.status == -100) {
        // 未登录
        sessionStorage.setItem("ms_moblie", "");
        localStorage.removeItem("ms_userinfo");
        sessionStorage.removeItem("ms_token");
    } else if (res.data.status == -101) {
        // 无权限
        Message.error({
            message: res.data.message,
            center: true
        });
        // this.$router.push("/login");
    } else if (res.data.status == 0) {
        // 操作失败
        // Message.error({
        //     message: res.data.message,
        //     center: true
        // });
    } else if (res.data.status == 1) {
        // 操作成功
        // Message.success({ message: res.data.message ,size:"small"});
    }
    return res;
}, err => {
    if (err.response.status == 504 || err.response.status == 404) {
        // Message.error({message: '服务器被吃了⊙﹏⊙∥'});
        Message.error({ message: err.data.msg });
    } else if (err.response.status == 403) {
        // Message.error({message: '权限不足,请联系管理员!'});
        Message.error({ message: err.data.msg });
    } else {
        // Message.error({message: '未知错误!'});
        Message.error({ message: err.data.msg });
    }
    return Promise.resolve(err);
})

//使用钩子函数对路由进行权限跳转
router.beforeEach((to, from, next) => {
    // 手机
    let that = this
    if (ismobile == 1) {
        document.title = to.meta.title || '无人资'   //设置每个页面的头部title
        let role = sessionStorage.getItem("ms_token"); // 得到登录的 token
        let ms_userinfo = localStorage.getItem("ms_userinfo"); // 得到登录页存储信息
        // console.log(ms_userinfo)
        const routes = ["login", "register", "404", "securityCode", "setpassword", "forgetpass"]; // 不用登录的页面，放开拦截
        if (!role && routes.indexOf(to.name) != -1) {
            // 未登录，进入登录页，不做拦截，直接跳转
            let url = window.location.href
            let hxurl = url + ""
            if (hxurl.indexOf("index") > 1) {
                console.log("window.location.href", window.location.href)
                sessionStorage.setItem('hxurl', url)
            }
            console.log("跳转链接", url)
            next();
        } else if (!role) {
            // 未登录，返回登录页面
            next("/login");
            // Vue.prototype.$router.push('/login')
            // next()
        }
        else if (!ms_userinfo) {  //本地没有保存的信息,移除token 进入login
            sessionStorage.removeItem("ms_token");
            next("/login");
        }
        else if (role && to.path == "/") {
            //  若获取PC端登录页面存储信息且未定义重定向页面，则跳转首页
            next("/index");
        } else {
            // 简单的判断IE10及以下不进入富文本编辑器，该组件不兼容
            if (navigator.userAgent.indexOf("MSIE") > -1 && to.path === "/editor") {
                Vue.prototype.$alert(
                    "vue-quill-editor组件不兼容IE10及以下浏览器，请使用更高版本的浏览器查看",
                    "浏览器不兼容通知",
                    {
                        confirmButtonText: "确定"
                    }
                );
            } else {
                next();
            }
        }
    }
});

//基地址
// let basee = '';  //接口代理地址参见：config/index.js中的proxyTable配置
let base = 'http://yiyuantech.com.cn:8100'
// let base='http://68.174.34.67'
//通用方法
export const POST = (url, params) => {
    return axios({
        method: 'post',
        url: `${base}${url}`,
        data: params,
        timeout: 30 * 1000,
        transformRequest: [function (data) {
            let ret = ''
            for (let it in data) {
                ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
            }
            return ret
        }],
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        }
    }).then(res => res.data)
}
// const api = "http://wrz.hongbao19.net/";
// const myAxios = axios.create({
//   //定义公用请求
//   baseURL: api,
//   timeout: 30 * 1000,
//   contentType: "application/x-www-form-urlencoded;charset=UTF-8",
//   transformRequest:[data=>{
//     return Qs.stringify({
//       ...data
//     })
//   }]
// });

// export const POST = (url, params) => {
//   return axios.post(`${base}${url}`, params).then(res => res.data)
// }

export const GET = (url, params) => {
    return axios.get(`${base}${url}`, { params: params }).then(res => res.data)
}

export const PUT = (url, params) => {
    return axios.put(`${base}${url}`, params).then(res => res.data)
}

export const DELETE = (url, params) => {
    return axios.delete(`${base}${url}`, { params: params }).then(res => res.data)
}

export const PATCH = (url, params) => {
    return axios.patch(`${base}${url}`, params).then(res => res.data)
}