用vue写项目main.js 中的一些设置

import Vue from 'vue';
import $ from 'webpack-zepto';
import VueRouter from 'vue-router';
import filters from './filters';
import routes from './routers';
import Alert from './libs/alert';
import store from './vuex/user';
import FastClick from 'fastclick';
Vue.use(VueRouter);
Vue.use(Alert);

  routes ,Vue, VueRouter,store  都是跟vue vuex 和vuerouter 有关的 $是为了进行类似jquery的操作引进的库  FastClick解决移动端点击300ms延迟的问题  直接FastClick.attach(document.body)   alert是当有error时电脑弹出的信息的设置 

const router = new VueRouter({
    mode: 'history',
    routes
})
router.beforeEach((to, from, next) => {
  if (to.matched.some((record) => {
    return record.meta.requiresAuth
  }) {
      if (store.state.userInfo.userId) {
        next()
      } else {
        next({
         path: '/login',
         query: {redirect: to.fullpath}
        })
       }
    }else {
     next()
    }
})

  router的初始化 mode为history 当路径改变时不会重新加载    router.beforeEach((to, from, next) {})实现的逻辑是 当record.meta.requiresAuth为true时 如果已经登陆 直接next() 

如果没登陆 去登陆页面  为false时直接登陆

// 如果sessionStorage 储存了user 则通过vuex 赋值给userInfo
if (window.sessionStorage.user) {
    store.dispatch('setUserInfo', JSON.parse(window.sessionStorage.user));
}

  利用sessionStorage存储登陆信息 通过store执行setUserInfo action 分发用户信息  

 

  

posted @ 2017-11-26 21:59  summercyz  阅读(13042)  评论(0编辑  收藏  举报