Vue管理系统前端系列三登录页和首页及`vuex`管理登录状态

新建 store/modules/user.js，将登录状态及内容保存到状态管理器中，内容如下：

import router from ‘@/router’

export default {
state: {
userInfo: null, //用户信息
token: null,
},
getters: {
userInfo: (state) => {
if (state.userInfo == null) {
let sessionUser = sessionStorage.getItem(‘user’)
if (sessionUser != null) {
state.userInfo = JSON.parse(sessionUser)
return sessionUser
} else {
let localeUser = localStorage.getItem(‘user’)
if (localeUser != null) {
state.userInfo = JSON.parse(localeUser)
}
return localeUser
}
}
return state.userInfo
},
token: (state) => {
if (state.token == null) {
let sessionToken = sessionStorage.getItem(‘token’)
if (sessionToken != null) {
state.token = sessionToken
return sessionToken
} else {
let localeToken = localStorage.getItem(‘token’)
state.token = localeToken
return localeToken
}
}
return state.token
},
},
mutations: {
setToken(state, token, flag = true) {
if (flag) {
localStorage.setItem(‘token’, token)
} else {
sessionStorage.setItem(‘token’, token)
}
},
setUserInfo(state, userInfo, flag = true) {
state.userInfo = userInfo
state.token = userInfo.token
if (flag) {
localStorage.setItem(‘user’, JSON.stringify(userInfo))
} else {
sessionStorage.setItem(‘user’, JSON.stringify(userInfo))
}
this.commit(‘setToken’, userInfo.token, flag)
},
logout(state) {
state.userInfo = null
state.token = null
localStorage.removeItem(‘token’)
localStorage.removeItem(‘user’)
sessionStorage.removeItem(‘token’)
sessionStorage.removeItem(‘user’)
router.push(’/login’)
},
},
actions: {},
}
然后再在 store/index.js 中将 user 模块引入进来，代码如下:

import Vue from ‘vue’
import Vuex from ‘vuex’

Vue.use(Vuex)

import user from ‘./modules/user’

const store = new Vuex.Store({
modules: {
user: user,
},
})
export default store
丰富界面
使用 element 的 from 组件，进行设计登录界面。界面代码如下：

Vue 后台管理系统

对界面进行 简单的样式调整，设置背景等，代码如下：

亚马逊测评 www.yisuping.com