登录流程
界面输入用户信息(@/view/components/login-form/login-form.vue)
->调用父组件的handleSubmit方法(@/view/login/login.vue)
->再调用Vuex actions 方法handleLogin(@/store/user.js)
->再调用axios方法login(@/api/user.js)
->请求后接口数据
handleSubmit({
userName,
password
}) {
this.handleLogin({
userName,
password
}).then(res => {
if (res.code == 0) {
this.$router.push({
name: this.$config.homeName
})
} else {
this.$Message.error("账号密码错误");
}
})
},
// 登录
handleLogin({
commit
}, {
userName,
password
}) {
userName = userName.trim()
return new Promise((resolve, reject) => {
login({
userName,
password
}).then(res => {
console.log(res)
if (res.code == 0) {
localStorage.setItem('token', res.res.token)
localStorage.setItem('realName', res.res.realName)
localStorage.setItem('userId', res.res.id)
localStorage.setItem('userType', res.res.userType)
localStorage.setItem('roleList', JSON.stringify(res.res.roleList))
localStorage.setItem('resourceList', JSON.stringify(res.res.resourceList))
}
resolve(res)
}).catch(err => {
reject(err)
})
})
},
// 退出登录
handleLogOut({
state,
commit
}) {
return new Promise((resolve, reject) => {
/* logout(state.token).then(() => {
commit('setToken', '')
commit('setAccess', [])
resolve()
}).catch(err => {
reject(err)
}) */
// 如果你的退出登录无需请求接口,则可以直接使用下面三行代码而无需使用logout调用接口
localStorage.removeItem("roleList")
localStorage.removeItem("resourceList")
localStorage.removeItem("token")
localStorage.removeItem("realName")
localStorage.removeItem('userId')
localStorage.removeItem('userType')
commit('setToken', '')
commit('setAccess', [])
resolve()
})
},
export const login = ({
userName,
password
}) => {
const data = {
userName,
password,
}
return axios.request({
url: 'login',
data,
method: 'post'
})
}
interceptors(instance, url) {
// 请求拦截
instance.interceptors.request.use(config => {
return config
}, error => {
return Promise.reject(error)
})
// 响应拦截
instance.interceptors.response.use(res => {
//20007和20008是后台接口返回的错误码
if (res.data.code === 20007 || res.data.code === 20008) {
// 说明 token 验证失败
// 可以直接跳转到登录页面,重新登录获取 token
location.href = Url[0].path
}
this.destroy(url)
return res.data
}, error => {
return Promise.reject(error)
})
}
getInsideConfig() {
const config = {
baseURL: this.baseUrl,
headers: {
'Content-Type': 'application/json',
'Authorization': localStorage.getItem('token')
}
}
return config
}
import Mock from 'mockjs'
import { login, logout, getUserInfo } from './login'
// 配置Ajax请求延时,可用来测试网络延迟大时项目中一些效果
Mock.setup({
timeout: 1000
})
// 登录相关和获取用户信息
// Mock.mock(/\/login/, login)
// Mock.mock(/\/get_info/, getUserInfo)
// Mock.mock(/\/logout/, logout)
// Mock.mock(/\/save_error_logger/, 'success')
export default Mock