VueBus 传值 在登录里的例子

1 定义vuebus

VueBus.js

/**
 * bus
 * @Author Canaan
 * @Date 2018/6/7.
 */
const install = function (Vue) {

    /**
     * 环境
     * @type {{}}
     */
    Vue.prototype.$env = {
        LOGIN_SUCCESS: 'x_asia_on_login_success',             //登录成功【事件】
        LOGIN_OUT_SUCCESS: 'x_asia_on_login_out_success',     //登出【事件】
        TOKEN_INVALID: 'x_asia_on_token_invalid',             //token 失败 【事件】
        COLLAPSE: 'x_asia_on_collapse',                       //侧边折叠
        TAGS: 'x_asia_on_tags',                               //设置标签
        LOGIN_TOKEN: 'x_asia_tasty_access_token',                   //令牌
        LOGIN_USER: 'x_asia_tasty_login_username',                  //登录用户名
        LOGIN_ROLE: 'x_asia_tasty_login_role',                      //登录角色
        CLOSE_NAV_TAB: 'x_asia_close_nav_tab',                //关闭某个导航栏tab
    };

    Vue.prototype.$bus = new Vue({
        method: {
            emit(event, ...args) {
                this.$emit(event, ...args);
            },
            on(event, callback) {
                this.$on(event, callback);
            },
            off(event, callback) {
                this.$off(event, callback);
            }
        }
    });

};

export default install;

main.js

main.js引用

// import './assets/iconfont/iconfont.css';
import verify from './assets/js/Verify.js';
import './assets/js/StringExt.js';
import './assets/js/UUID.js';
import Vue from 'vue';
import VueBus from './assets/js/VueBus';
import Ajax from './assets/js/Ajax.js';
import store from './store/index';
import Filters from './assets/js/Filters.js';
import App from './App.vue';
import router from './router/index';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// import './assets/css/icon.css';
import "babel-polyfill";
import './assets/js/GlobalComponents';

Vue.prototype.verify = verify;
Vue.use(VueBus);
Vue.use(Filters);
Vue.use(Ajax);
Vue.config.devtools = process.env.NODE_ENV === 'development';
Vue.config.productionTip = false;
Vue.use(ElementUI, {
    size: 'small'
});

window.addEventListener('storage', function (event) {
    if (event.newValue) {
        window.location = top.location.href.substring(0, top.location.href.indexOf('#'));
    }
}, false);


new Vue({
    router,
    store,
    beforeCreate() {
        //加载当前用户信息
        this.$store.dispatch('loadUserContext', this);
        //加载当前用户ViewWidget
        this.$store.dispatch('loadNavMenu', this);
    },
    mounted() {
        //会话失败事件监听
        this.$bus.$on(this.$env.TOKEN_INVALID, () => {
            this.logout();
        });

        //登录退出事件监听
        this.$bus.$on(this.$env.LOGIN_OUT_SUCCESS, () => {
            this.logout();
        });

        //登录成功事件监听
        this.$bus.$on(this.$env.LOGIN_SUCCESS, loginUser => {
            this.login(loginUser);
        });

    },
    destroyed() {
        this.$bus.$off(this.$env.TOKEN_INVALID);
        this.$bus.$off(this.$env.LOGIN_OUT_SUCCESS);
        this.$bus.$off(this.$env.LOGIN_SUCCESS);
    },
    methods: {
        /**
         * 登出处理
         * @author Canaan
         * @date 2019/3/15 10:56
         */
        logout() {
            this.$store.commit('userContext', {});
            this.$store.commit('navMenu', {});

            sessionStorage.removeItem(this.$env.LOGIN_TOKEN);
            sessionStorage.removeItem(this.$env.LOGIN_ROLE);

            if (this.$route.path !== "/login") {
                this.$router.push('/login')
            }
        },
        /**
         * 登录处理
         * @author Canaan
         * @date 2019/3/15 10:57
         */
        login(loginUser) {
            sessionStorage.setItem(this.$env.LOGIN_TOKEN, loginUser.token);
            if (loginUser.rememberMe) {
                localStorage.setItem(this.$env.LOGIN_USER, loginUser.username);
            } else {
                localStorage.removeItem(this.$env.LOGIN_USER);
            }

            Promise.all([
                this.$store.dispatch('loadUserContext', this)
                    .then(user => {
                        if (!user || !user.role) {
                            return;
                        }
                        sessionStorage.setItem(this.$env.LOGIN_ROLE, user.role);
                    }),
                this.$store.dispatch('loadNavMenu', this)

            ]).then(res => {
                //加载当前用户模块 /当前用户信息
                this.$router.push('/');
            }).catch(res => {
                this.$message.error("登录失败");
            })

        }
    },
    render: h => h(App)
}).$mount('#app');

需要定义监听和销毁

登录触发