vue+vuex+axios实现登录、注册页权限拦截

2023-09-15 16:01:04 69

在GitHub上有很多写好的模板，这个项目也是基于模板做的。

现在记录一下我做的过程

1、修改config文件夹里的dev.env.js里的BASE_API，把地址改成请求后端的公共部分

BASE_API:'"http://192.168.xx.xx"',

2、接下来就是操作src文件，先在views里写好vew组件（login.vue,regist.vue），写好到router里的index.js里配置好路径

login.vue

router/index.js

{path:'/login',component:_import('Login/login'),hidden:true}

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

importrequestfrom'@/utils/request'
exportfunctionlogin(name,password){
returnrequest({
url:'/XX/XX',
method:'post',
data:{
name,
password
}
})
}

stores/modules/user.js

import{login,regist,logout}from'@/api/login'
import{getToken,setToken}from'@/utils/auth'
constuser={
state:{
name:'',
token:''
},
mutations:{
SET_NAME:(state,name)=>{
state.name=name;
},
SET_TOKEN:(state,token)=>{
state.token=token;
setToken(token);
}
},
actions:{
//登录
Login({commit},userInfo){
constname=userInfo.name.trim();
constpassword=userInfo.password.trim();
returnnewPromise((resolve,reject)=>{
login(name,password).then(response=>{
constdata=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){
constname=userInfo.name.trim();
constpassword=userInfo.password.trim();
returnnewPromise((resolve,reject)=>{
regist(name,password).then(response=>{
constdata=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}){
returnnewPromise((resolve,reject)=>{
logout().then(response=>{
commit('SET_NAME','');
commit('SET_TOKEN','');
setName('');
setToken(false);
//removeName();
//removeToken();
resolve(response);
}).catch(error=>{
reject(error)
})
})
},
//前端登出
FedLogOut({commit}){
returnnewPromise(resolve=>{
setToken(false);
commit('SET_TOKEN',false);
resolve()
})
}
}
}
exportdefaultuser

getter.js:

constgetters={
name:state=>state.user.name,
token:state=>state.user.token
}
exportdefaultgetter

4、在utils里的auth.js里对cookies进行操作，写入，读取，删除用户权限，是否登录的标志等

importCookiesfrom'js-cookies'
exportfunctionsetName(name){
returnCookies.set("name",name);
}
exportfunctiongetName(){
returnCookies.get("name");
}
exportfunctionsetToken(token){
returnCookies.set("token",token);
}
exportfunctiongetToken(){
returnCookies.get("token");
}

5、在permission.js里写白名单，对白名单以外的跳转进行拦截然后跳转登录，同时判断用户权限，是否登录,等

importrouterfrom'./router'
importstorefrom'./store'
importNProgressfrom'nprogress'//Progress进度条
import'nprogress/nprogress.css'//Progress进度条样式
import{Message}from'element-ui'
import{getName,getToken}from"@/utils/auth";//验权
constwhiteList=['/login','/regist'];//不重定向白名单
router.beforeEach((to,from,next)=>{
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里写拦截码，对后端返回的特定码进行拦截然后做相应的操作

importaxiosfrom'axios'
import{Message,MessageBox}from'element-ui'
importstorefrom'../store'
//创建axios实例
constservice=axios.create({
baseURL:process.env.BASE_API,//api的base_url
timeout:15000//请求超时时间
});
//respone拦截器
service.interceptors.response.use(
response=>{
/**
*code为非200是抛错可结合自己业务进行修改
*/
constres=response.data;
//constres=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:'重新注册',
cancelButtonText:'取消',
type:'warning'
}).then(()=>{
store.dispatch('FedLogOut').then(()=>{
location.reload()//为了重新实例化vue-router对象避免bug
})
})
}
returnPromise.reject('error')
}else{
returnresponse.data
}
},
error=>{
Message({
message:error.message,
type:'error',
duration:5*1000
});
returnPromise.reject(error)
}
)
exportdefaultservice

以上就是登录注册的核心部分，写的不对的地方请指教

这篇vue+vuex+axios实现登录、注册页权限拦截就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

vue+vuex+axios实现登录、注册页权限拦截

热门推荐

随机推荐