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 分发用户信息
时间: 2025-01-09 08:54:19