详解vue后台系统登录态管理-创新互联
技术应用
js-cookie + vuex + localStorage 做数据持久化
js-cookie
npm i js-cookie --save
vuex
user.js
import { login, logout } from '@/servers/login' import { getToken, setToken, removeToken } from '@/utils/auth' // 这是上面的js-cookie暴露出来的方法 const user = { state: { userInfo: "", token: getToken(), roles: [] }, mutations: { SET_TOKEN: (state, token) => { state.token = token } }, actions: { // 用户名登录 login({ commit }, userInfo) { const userName = userInfo.userName.trim() return new Promise((resolve, reject) => { login({userName: userName, password: userInfo.password}).then(res => { if (res.status.statusCode === 0) { const data = res.result commit('SET_TOKEN', data.token) setToken(data.token) localStorage.setItem('userInfo', JSON.stringify(data)) resolve() } else { resolve(res.status.statusReason) } }) .catch(error => { reject(error) }) }) }, // 登出 logout({ commit }, userId ) { return new Promise((resolve, reject) => { logout({id: userId}).then((res) => { if (res.status.statusCode === 0) { commit('SET_TOKEN', '') removeToken() localStorage.clear() resolve() } else { resolve(res.status.statusReason) } }) .catch(error => { reject(error) }) }) } } } export default user
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
当前题目:详解vue后台系统登录态管理-创新互联
标题来源:http://myzitong.com/article/cchhdd.html