在GitHub上有很多写好的模板，这个项目也是基于模板做的。
现在记录一下我做的过程
1、修改config文件夹里的dev.env.js里的BASE_API，把地址改成请求后端的公共部分
2、接下来就是操作src文件，先在 views里写好vew组件（login.vue,regist.vue），写好到router里的index.js里配置好路径
login.vue
Box login-form">
用户名"/>
登录
登录
router/index.js
3、在api里的login.js里写好与后端对接的接口地址，在stores里的modules里的user.js里定义user，有state，mutations，action，具体的请求操作写在action里，login.vue或regist.vue调用user.js里写好的请求，getter.js里定义store的getters
api/login.js
stores/modules/user.js
{
state.name = name;
},SET_TOKEN: (state,token) => {
state.token = token;
setToken(token);
}
},actions: {
// 登录
Login({ commit },userInfo) {
const name = userInfo.name.trim();
const password = userInfo.password.trim();
return new Promise((resolve,reject) => {
login(name,password).then(response => {
const data = response.data;
commit('SET_NAME',data.name);
commit('SET_TOKEN',data.token);
setName(data.name);
setToken(data.token);
resolve(response); }).catch(error => { reject(error) }) }) },// 注册
Regist({ commit },userInfo) {
const name= userInfo.name.trim();
const password = userInfo.password.trim();
return new Promise((resolve,reject) => {
regist(name,password).then(response => {
const data = response.data;
commit('SET_NAME',data.name);
commit('SET_TOKEN',data.token);
setName(data.name);setToken(data.token);
resolve(response);
}).catch(error => {
reject(error) }) }) },// 登出
logout({ commit,state }) {
return new Promise((resolve,reject) => {
logout().then(response => {
commit('SET_NAME','');
commit('SET_TOKEN','');
setName('');
setToken(false);
//removeName();
//removeToken();
resolve(response);
}).catch(error => {
reject(error)
})
})
},// 前端 登出
Fedlogout({ commit }) {
return new Promise(resolve => {
setToken(false);
commit('SET_TOKEN',false);
resolve()
})
}
}
}
export default user
getter.js:
state.user.name,token:state=>state.user.token
}
export default getter
4、在utils里的auth.js里对cookies进行操作，写入，读取，删除用户权限，是否登录的标志等
5、在permission.js里写白名单，对白名单以外的跳转进行拦截然后跳转登录，同时判断用户权限，是否登录,等
{
NProgress.start();
if (whiteList.indexOf(to.path) !== -1) {
next();
} else {
if (getToken()==="true") {
next();
NProgress.done()
} else {
next({path: '/login'});
NProgress.done()
}
}
})
router.afterEach(() => {
NProgress.done() // 结束Progress
})
6、utils里的request.js里写拦截码，对后端返回的特定码进行拦截然后做相应的操作
{
/**
* code为非200是抛错 可结合自己业务进行修改
*/
const res = response.data;
//const res = response;
if (res.code !== '200' && res.code !== 200) {
if (res.code === '4001' || res.code === 4001) {
MessageBox.confirm('用户名或密码错误，请重新登录','重新登录',{
confirmButtonText: '重新登录',cancelButtonText: '取消',type: 'warning'
}).then(() => {
store.dispatch('Fedlogout').then(() => {
location.reload()// 为了重新实例化vue-router对象 避免bug
})
})
}
if (res.code === '4009' || res.code === 4009) {
MessageBox.confirm('该用户名已存在，请重新注册！','重新注册',{
confirmButtonText: '重新注册',type: 'warning'
}).then(() => {
store.dispatch('Fedlogout').then(() => {
location.reload()// 为了重新实例化vue-router对象 避免bug
})
})
}
return Promise.reject('error')
} else {
return response.data
}
},error => {
Message({
message: error.message,type: 'error',duration: 5 * 1000
});
return Promise.reject(error)
}
)
export default service
这篇vue+vuex+axios实现登录、注册页权限拦截就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。
原文链接：https://www.f2er.com/vue/33286.html