1、获取token——utils/auth.js(需要安装Cookies
import Cookies from 'js-cookie'
// const TokenKey = 'Admin-Token'
const TokenKey = 'front_access_token'
export function getToken() {
return Cookies.get(TokenKey)
}
export function setToken(token) {
return Cookies.set(TokenKey, token)
}
export function removeToken() {
return Cookies.remove(TokenKey)
}
2、在根目录下创建store文件夹
在store文件夹下创建modules文件夹
store_modules_user.js
import { login } from '@/api/login'
import { getToken, setToken, removeToken } from '@/utils/auth'
import router from '@/router'
const state = {
token: getToken(),
name: '',
avatar: '',
introduction: '',
roles: []
}
const mutations = {
SET_TOKEN: (state, token) => {
state.token = token
},
SET_INTRODUCTION: (state, introduction) => {
state.introduction = introduction
},
SET_NAME: (state, name) => {
state.name = name
},
SET_AVATAR: (state, avatar) => {
state.avatar = avatar
},
SET_ROLES: (state, roles) => {
state.roles = roles
}
}
const actions = {
// user login
login({ commit }, userInfo) {
const { userName, password } = userInfo
return new Promise((resolve, reject) => {
login({ userName: userName.trim(), password: password }).then(response => {
// console.log('token',response.info['front_access_token'])
// const token = response.info.accessToken
const token = response.info['front_access_token']
commit('front_access_token', token)
setToken(token)
// const { data } = response
// commit('SET_TOKEN', data.token)
// setToken(data.token)
resolve()
}).catch(error => {
// reject(error)
reject(error)
})
})
},
// user logout
logout({ commit, state, dispatch }) {
return new Promise((resolve, reject) => {
logout().then(res => {
if (res.code === 100) {
commit('SET_TOKEN', '')
commit('SET_ROLES', [])
commit('SET_NAME', '')
commit('SET_CURRENT_ROLE', null)
window.sessionStorage.removeItem('userInfo')
window.sessionStorage.removeItem('routeIds')
window.sessionStorage.removeItem('roles')
window.sessionStorage.removeItem('currentRole')
removeToken()
resetRouter()
// reset visited views and cached views
// to fixed https://github.com/PanJiaChen/vue-element-admin/issues/2485
dispatch('tagsView/delAllViews', null, { root: true })
Message.info('退出登录成功')
// 下面这个resolve方法必须调用,否则如法到达Navbar组件中退出登录回调方法进行路由跳转到登录页面
resolve()
} else {
reject('退出登录失败')
}
})
})
},
logout({ commit, state, dispatch }) {
return new Promise((resolve, reject) => {
logout(state.token).then(() => {
commit('SET_TOKEN', '')
co