vue项目封装auth.js工具,用vuex实现登录信息校验管理token

1.在 src\utils\ 目录下创建 auth.js， 封装 token 和 用户信息工具模块

const TOKEN_KEY = 'mxg-msm-token'
const USER_KEY = 'mxg-msm-user' 
// 获取 token 
export function getToken() { 
	return localStorage.getItem(TOKEN_KEY) 
}
// 保存 token 
export function setToken(token) { 
	return localStorage.setItem(TOKEN_KEY, token) 
}
// 获取用户信息 
export function getUser() { 
	return JSON.parse(localStorage.getItem(USER_KEY)) 
}
//保存用户信息 
export function setUser(user) {
 	localStorage.setItem(USER_KEY, JSON.stringify(user)) 
}
//移除用户信息 
export function removeToken() {
	localStorage.removeItem(TOKEN_KEY)
	localStorage.removeItem(USER_KEY) 
}

2.在 src 目录下新建 store\modules 目录，modules 下创建 user.js

import { login, getUserInfo, logout } from '@/api/login'
import { getToken, setToken, setUser, getUser, removeToken } from '@/utils/auth'
const user = { 
	state: { 
		token: null, 
		user: null 
	},
	mutations: { 
		SET_TOKEN(state, token) { 
			state.token = token setToken(token) 
		},
		SET_USER(state, user) { 
			state.user = user 
		} 
	},
	actions: { 
		// 登录
		Login({ commit }, form) { 
			// 提交表单给后台进行验证是否正确 
			// resolve 触发成功处理，reject 触发异常处理
			return new Promise((resolve, reject) => {
				login(form.username.trim(), form.password).then(response => {
					const resp = response.data
					commit('SET_TOKEN', resp.data.token)
					resolve(resp) 
				}).catch(error => { 
					reject(error) 
				}) 
			}) 
		}, 
	} 
}
export default user

3.在 src\store 目录下创建 index.js

import Vue from 'vue' 
import Vuex from 'vuex' 
import user from './modules/user' 
Vue.use(Vuex)
const store = new Vuex.Store({
	modules: { 
		user 
	}
})
export default store

4.修改 src 下的 main.js，导入和注册 store

....省略
//导入
import store from './store' 
Vue.use(ElementUI); 
import './permission' 
new Vue({ 
	router, 
	store, // 注册 
	render: h => h(App) 
}).$mount("#app");

5.重构登录组件 views\login\index.vue

。。。
methods: { 
	submitForm(formName) {
		this.$refs[formName].validate(valid => { 
			if (valid) { 
				this.$store.dispatch('Login', this.form).then(response => { 
					if(response.flag) { 
						// 前往首页 
						this.$router.push('/') 
					}else { 
						this.$message({
							message: response.message,
							type: 'warning' 
						}) 
					} 
				}) 
			}else{
				console.log('验证失败') 
				return false 
			} 
		}) 
	} 
。。。

6.测试登录是否正常进入，并观察浏览器中localStorage是否有值

转载自梦学谷