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 分发用户信息