利用路由鉴权实现登录授权

import Vue from 'vue'
import App from './App.vue'
import Vuex from 'vuex'
import router from './router'
import store from './store/index.js'
import vueSwiper from 'vue-awesome-swiper'
import { http } from '@/utils/api'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import { rsort } from 'semver'

Vue.use(ElementUI);
Vue.use(Vuex)
Vue.use(vueSwiper)
Vue.config.productionTip = false
Vue.prototype.$http = http

// echarts(宽度)中自适应
Vue.prototype.getFontSize = (px) => {
    let width = document.body.clientWidth
    return px * width / 1920
}
// 高度的自适应
Vue.prototype.getFontSizeY = (px) => {
  let width = document.body.clientHeight
  return px * width / 1080
}
//路由鉴权
router.beforeEach(async(to,from,next)=>{
  let res = await http.post('/ctrl/indexData/getUserInfo')
  console.log(res);
  if(res && res.data && res.data.data.userId){
    window.sessionStorage.setItem('userInfo',JSON.stringify(res.data.data))
    next()
  }else{
    let localurl = window.location.origin; //当前页面url的源 
    let govurl = localurl +`${window.contextPath}`+ '/ctrl/login'
    window.open(`${govurl}`, "_self")
  }

})

new Vue({
    el: '#app',
    router,
    store,
    components: { App },
    template: ''
})

你可能感兴趣的:(工作中的积累,vue.js)