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

getter.js

const getters = {
    userInfo: state => state.user.userInfo
}

export default getters

store.js

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import getters from './getters'

Vue.use(Vuex)

const store = new Vuex.Store({
    modules: {
        user
    },
    getters
})

export default store

以上就是整个登录态的设定

在项目中的使用，如下
点击登录后

	this.$store.dispatch('login', {userName: userName, password: password}).then((res) => {
		console.log(res)
		if(!res) {
			//	登录成功后的逻辑
		} else {
			//	登录失败后的逻辑
		}
	})

点击退出后

	this.$store.dispatch('logout', userId).then((res) => {
	     if (!res) {
	        //	退出成功的逻辑
	     }
	     else {
	        //	退出失败的逻辑
	     }
	 })

需要特别注意的一点，vuex在页面刷新之后会消失掉.

补充：实现登录记住密码的操作也很简单。 判断用户是否点击了记住密码。如果是则记住密码，在存cookie的里面加一个Cookies.set(‘name’, ‘value’, { expires: 7 }) expires用来设置记住密码的时间。