token登录改造
一、需求
登录后并且token未过期才有权限使用该系统或平台
二、思路
1.login.vue中使用store来储存该登录状态
2.request.js中(前端请求拦截器中)将token存到headers中
每次请求接口时,通过接口返回的code来判断,code为401即token过期,则重定向到登录页面。
登出时从store中删除掉token(重置token)
代码如下:
api.js中
export function login(data) {
return request({
url: '/fs/login',
method: 'post',
data
})
}
export function logout(data) {
return request({
url: '/fs/logOut',
method: 'post',
data
})
}
request.js
if (res.code === '401') {
store.dispatch("user/resetToken").then(() => {
//重定向到登录页
router.replace({path:"/login"})
});
}
auth.js
const TokenKey = 'vue_admin_template_token'
export function getToken() {
return window.sessionStorage.getItem(TokenKey);
}
export function setToken(token) {
return window.sessionStorage.setItem(TokenKey, token);
}
export function removeToken() {
return window.sessionStorage.removeItem(TokenKey);
}
store/modules/user.js
import { login, logout } from '@/api/user'
import { getToken, setToken, removeToken } from '@/utils/auth'
import { resetRouter } from '@/router'
const getDefaultState = () => {
return {
token: getToken(),
name: '',
avatar: ''
}
}
const state = getDefaultState()
const mutations = {
RESET_STATE: (state) => {
Object.assign(state, getDefaultState())
},
SET_TOKEN: (state, token) => {
state.token = token
},
SET_NAME: (state, name) => {
state.name = name
},
SET_AVATAR: (state, avatar) => {
state.avatar = avatar
}
}
const actions = {
// user login
login({ commit }, userInfo) {
const { userName, password } = userInfo
return new Promise((resolve, reject) => {
login({ userName: userName.trim(), password: password }).then(response => {
// const { data } = response
commit('SET_TOKEN', response.token)
setToken(response.token)
resolve()
}).catch(error => {
reject(error)
})
})
},
// user logout
logout({ commit, state }) {
console.log("token",state.token)
return new Promise((resolve, reject) => {
logout({id:state.token}).then(() => {
removeToken() // must remove token first
resetRouter()
commit('RESET_STATE')
resolve()
}).catch(error => {
reject(error)
})
})
},
// remove token
resetToken({ commit }) {
return new Promise(resolve => {
removeToken() // must remove token first
commit('RESET_STATE')
resolve()
})
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
login.vue
handleLogin(){
this.loading = true;
this.$store.dispatch('user/login', this.loginForm).then(() => {
this.$router.push({ path: this.redirect || '/' })
this.loading = false
}).catch(() => {
this.loading = false
})
}