vue项目封装auth.js工具,用vuex实现登录信息校验管理token
1.在 src\utils\ 目录下创建 auth.js, 封装 token 和 用户信息工具模块const TOKEN_KEY = 'mxg-msm-token'const USER_KEY = 'mxg-msm-user'// 获取 tokenexport function getToken() {return localStorage.getItem(TOKEN_KEY)}// 保存 tok
·
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是否有值
转载自梦学谷
更多推荐
已为社区贡献2条内容
所有评论(0)