const whiteList = ['/login'] // no redirect whitelist
- 下面打开
src/api/index.js，修改api对象内的【Login】的接口路径和【UserInfo】的接口路径
- 改为我们的接口地址
const api = {
Login: '/api/login',
UserInfo: '/api/getInfo',
UserName: '/user/name'
}
export default api
- 然后打开
src/api/user.js，就可以看到我们登录方法和获取用户信息方法就静静等躺在那里，你想用，直接引入用起就是～
- 下面开始配置反向代理解决跨域
- 打开项目的
src/vue.config.js，找到下图中的代码，把注释打开
-
注意 proxy前面 要用 逗号 隔开
- 修改target为
https://yyds.it98k.cn
proxy: {
//配置跨域
'/api': {
target: "https://yyds.it98k.cn",
// ws:true,
changOrigin:true,
pathRewrite:{
'^/api':'/'
}
}
}
- 然后修改环境变量
- 打开
src/config/env.development.js，修改baseApi的value值为/api
-
然后重启项目，才会生效
- 下面
- 打开
src/utils/request.js
- 在该文件顶部引入getToken方法
import { getToken,setToken,removeToken } from '@/utils/auth';
- 在该文件中找到
if (res.status && res.status !== 200)修改为if (res.code && res.code !== 200)
if (res.code && res.code !== 200) {
// 登录超时,重新登录
if (res.code === 401) {
store.dispatch('FedLogOut').then(() => {
location.reload()
})
}
return Promise.reject(res || 'error')
}
-
下面开始接入登录接口
- 打开
src/views/login/index.vue
- 找到登录按钮触发的方法
handlerLogin
- 在handlerLogin方法里写逻辑
if (this.username.trim() === '') {
this.$toast.fail('用户名不能为空')
return
}
if (this.password.trim() === '') {
this.$toast.fail('密码不能为空')
return
}
this.$store.dispatch('login', {username:this.username,password:this.password}).then(() => {
this.$router.push({ path: '/' })
}).catch(err => {
this.$toast.fail(err.message)
})
- 分析：先进行非空校验，用户名和密码不能为空
- 然后校验通过直接使用
dispatch触发vuex内的login方法
- vuex内现在还没有定义
login方法，需要去vuex内新建该方法，假设登录成功，直接跳转到首页，假设登录失败，就弹出错误信息，比如账号密码错误
- 下面就去vuex内新建
login方法
- 打开
src/store/modules/app.js，在actions里新建登录方法
-
actions
// user login
login({ commit }, userInfo) {
const { username, password } = userInfo
return new Promise((resolve, reject) => {
login({ username: username.trim(), password: password }).then(response => {
commit('SET_TOKEN', response.token)
setToken(response.token)
resolve()
}).catch(error => {
reject(error)
})
})
},
- 因为用到了登录接口api方法
login和获取用户信息接口api方法getUserInfo，和 setToken 方法以及会用到setToken,removeToken，所以要导入需要用到的方法，此外还用到了SET_TOKEN常量方法，要在mutations内新建该方法
import { login,getUserInfo } from "@/api/user"
import { getToken,setToken,removeToken } from "@/utils/auth"
const state = {
userInfo: '',
token:getToken()
}
const mutations = {
SET_USER_NAME(state, userInfo) {
state.userInfo = userInfo
},
SET_TOKEN: (state, token) => {
state.token = token
},
}
const getters = {
userInfo: state => state.app.userInfo,
token: state => state.app.token,
}
export default getters
- 这是因为，登录成功后，触发了
permission.js里面的逻辑
- 而vuex内并没有
getUserInfo这个方法，所有一直在死循环报错！
- 下面回到vuex内新建
getUserInfo方法
-
actions
getUserInfo({ commit, state }) {
return new Promise((resolve, reject) => {
getUserInfo().then(response => {
const { data } = response
if (!data) {
return reject('Verification failed, please Login again.')
}
const { username } = data
commit('SET_USER_NAME', data)
resolve(data)
}).catch(error => {
reject(error)
})
})
},
- 下面修改下
permission.js的const hasGetUserInfo = store.getters.userInfo
- 改成如下
const hasGetUserInfo = store.getters.userInfo
- 通过排查发现，getInfo接口确实触发了，但是后端返回
401，token失效,并且报错信息提示unknown action type: FedLogOut，找到报错的位置，发现，我们的响应拦截函数拦截到了401状态码，触发了如下的逻辑
// 登录超时,重新登录
if (res.code === 401) {
store.dispatch('FedLogOut').then(() => {
location.reload()
})
}
- 该段代码的意思是，捕获到401状态码后，触发了vuex内的
FedLogOut方法
- 而vuex内并没有这个方法，所以，要回到vuex内新建
FedLogOut方法
-
actions
// remove token
FedLogOut({ commit }) {
return new Promise(resolve => {
removeToken() // must remove token first
resolve()
})
}
- 这时候，输入正确的账号密码登录还是登录不成功，原因是因为我们没有传给后端token，需要修改下如下
- 打开
src/utils/request.js的请求拦截器内的config.headers['X-Token'] = ''
- 改成
config.headers['token'] = getToken()
- 现在再去输入正确的账号密码登录，就可以
-
【登录成功了】!!!
