vue elementui登录界面：vue网页版聊天 vue element-ui仿微信界面
vue elementui登录界面：vue网页版聊天 vue element-ui仿微信界面// 注册全局钩子（拦截登录状态） router.beforeEach((to from next) => { const token = store.state.token // 判断该路由地址是否需要登录权限 if(to.meta.requireAuth){ // 判断token是否存在 if(token){ next() }else{ next() // 未登录授权 wcPop({ content: '还未登录授权！' anim: 'shake' style: 'background:#e03b30;color:#fff;'
/*
* 主页面js
*/
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './vuex'
// 引入公共Js
import './common.js'
// 引入全局组件
// 方式一：
// Vue.component('headerBar' resolve => require(['./common/header'] resolve))
// Vue.component('tab-bar' resolve => require(['./common/footer'] resolve))
// 方式二：
import _g_component from './components.js'
Vue.use(_g_component)
new Vue({
el: '#app'
router
store
render: h => h(App)
})app.vue页面配置
- 页面主面板模板
<template>
<div id="app">
<div class="vchat-wrapper flexbox flex-alignc">
<div class="vChat-panel" style="background-image: url(src/assets/img/placeholder/vchat__panel-bg01.jpg);">
<div class="vChat-inner flexbox">
<!-- //顶部按钮(最大、最小、关闭) -->
<win-bar></win-bar>
<!-- //侧边栏 -->
<side-bar v-if="!$route.meta.hideSideBar"></side-bar>
<keep-alive>
<router-view class="flex1 flexbox"></router-view>
</keep-alive>
</div>
</div>
</div>
</div>
</template>
- 引入css
<style>
/* 引入公共样式 */
@import './assets/fonts/iconfont.css';
@import './assets/css/reset.css';
@import './assets/css/layout.css';
</style>vue页面路由配置
/*
* 页面地址路由js
*/
import Vue from 'vue'
import Router from 'vue-router'
import store from '../vuex'
// 通过改写router.go方法，当new Router 实例就包含back方法
Router.prototype.back = function(){
window.history.go(-1)
}
Vue.use(Router)
const router = new Router({
routes: [
// 登录、注册
{
path: '/login'
component: resolve => require(['../views/auth/login'] resolve)
meta: { hideSideBar: true }
}
{
path: '/register'
component: resolve => require(['../views/auth/register'] resolve)
meta: { hideSideBar: true }
}
//...
// 聊天页面
{
path: '/chat'
component: resolve => require(['../views/chat/group-chat'] resolve)
meta: { requireAuth: true }
}
//...
]
});
export default router
router.beforeEach和next实现路由拦截验证
// 注册全局钩子（拦截登录状态）
router.beforeEach((to from next) => {
const token = store.state.token
// 判断该路由地址是否需要登录权限
if(to.meta.requireAuth){
// 判断token是否存在
if(token){
next()
}else{
next()
// 未登录授权
wcPop({
content: '还未登录授权！' anim: 'shake' style: 'background:#e03b30;color:#fff;' time: 2
end: function(){
next({ path: '/login' })
}
});
}
}else{
next()
}
})
❤️ 最后
如果你觉得这篇文章对你有帮助，麻烦点个「关注/转发」，让更多的人也能看到你的分享！
