首先我们需要调用一个后台的登录服务,但是每次刷新的时候,都会离线,所以有调用一个可以校验是否在线的服务这个,通过校验是否登录我们进行跳转登录页面还是,登录成功之后进入系统主页面,然后将用户的信息存入到vuex中,供其他的模块调用
首先看我的vuex配置模块的结构是这样的
在vuex / index.js中这样配置
import Vue from "vue"
import Vuex from "vuex"
import Login from "./stores/login/store.js"
Vue.use(Vuex)
export default new Vuex.Store({
modules:{
Login,
}
})
然后进入vuex / login /mutation-types.js
/**
* login
*/
/*mutations*/
export const SET_USERINFO = 'login/SET_USERINFO'
export const SET_HAVELOGIN = 'login/SET_HAVELOGIN'
export const SET_MENUS = 'login/SET_MENUS'
/*getters*/
export const userInfo = 'login/userInfo'
export const haveLogined = 'login/haveLogined'
export const menus = 'login/menus'
/*actions*/
export const login = 'login/login'
export const getSession = 'login/getSession'
export const getUserSession = 'login/getUserSession'
export const logout = 'login/logout'
export const getMenus = 'login/getMenus' //获取权限菜单
然后进入vuex / login /store.js 这一部分是用的hrpose调用不会配置的可以参考我的上几篇
import * as TYPES from './mutation-types.js'
import {
javaclient,netclient
} from '../../../httpclient.js'
const state = {
userInfo: {},
haveLogined: false,
menus: null,
};
const mutations = {
[TYPES.SET_USERINFO]: (state, userInfo) => state.userInfo = userInfo,
[TYPES.SET_HAVELOGIN]: (state, loginState) => {
state.haveLogined = loginState
},
[TYPES.SET_MENUS]: (state, menus) => {
state.menus = menus;
},
};
const getters = {
[TYPES.userInfo]: ({
userInfo
}) => userInfo,
[TYPES.haveLogined]: ({
haveLogined
}) => haveLogined,
[TYPES.menus]: ({
menus
}) => menus,
};
const actions = {
[TYPES.login]: async ({
dispatch
}, {username,password}) => {
return await javaclient.invoke('loginTest', [username,password])
},
[TYPES.logout]: async ({
dispatch
}) => {
return await javaclient.invoke('userOut');
},
[TYPES.getSession]: async ({
dispatch
}) => {
return await javaclient.invoke('isLogin');
},
[TYPES.getMenus]: async ({
dispatch
},{id,sid}) => {
return await netclient.invoke('GetFunByUserID2SystemID', [id, sid]);
},
}
export default {
state,
getters,
mutations,
actions,
}
然后在router / index.js中配置主路由
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login/login'
import Main from '@/components/Main/main'
import home from './routers/home.js'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
redirect: '/main'
},
{
path: '/login',
name: 'Login',
component: Login
},
{
path: '/main',
name: 'main',
component: Main,
redirect: '/main/home',
children: [
home,
]
}
]
})
然后在router / routers / home.js中配置子路由
import home from '../../components/Main/components/Map/map.vue'
export default {
path: '/main/home',
name: 'home',
redirect: '/main/home_list',
component: home,
children: [{
path: '/main/home_list',
name: 'home_list',
// component: resolve => require(['@/components/Main/modules/home/_modules/list.vue'], resolve),
component: resolve => require(['@/components/Main/components/Map/map.vue'], resolve),
meta: {
name: '首页',
parent: ''
}
}, {
path: '/protocol/protocol_apply',
name: 'mapbox_list',
component: resolve => require(['@/components/Main/modules/mapbox/_modules/list.vue'], resolve),
meta: {
name: 'mapbox',
parent: ''
}
}, ]
}
最后校验是否登录状态的我单独引用了一个文件
function beforeRouteUpdate(to, from, next, store) {
let {
path
} = to;
if(path=='/login'){
next();
return
}
// console.log(store.state.Login.haveLogined,"store.state.Login.haveLogined")
if (store.state.Login.haveLogined) {
next();
} else {
store.dispatch('login/getSession').then(res => {
let data = JSON.parse(res);
if (data.status == 0) {
store.commit('login/SET_USERINFO', data.result.user)
store.commit('login/SET_HAVELOGIN', true)
let param = {
id: store.state.Login.userInfo.ID,
sid: 1,
}
store.dispatch('login/getMenus', param).then(res=>{
let data=JSON.parse(res)
if(data.IsSuccess && data.ResultValue.length > 0){
store.commit('login/SET_MENUS', data.ResultValue)
next()
}
else{
this.$message.error("没有权限进入系统")
}
})
} else {
store.commit('login/SET_USERINFO', {})
store.commit('login/SET_HAVELOGIN', false)
next('/login')
}
})
}
}
export default (router, store) => {
router.beforeEach((to, from, next) => {
beforeRouteUpdate(to, from, next, store)
})
}
要在main.js中引用下,这样就完成了
import beforeRouteUpdate from './router/beforeRouteUpdate.js'
beforeRouteUpdate(router,store)