VueAntdAdmin关于登录的一些陷阱

最近在写一段时间的静态页面，才开发一个前后端分离的页面进行管理。今天来到登录界面，说说我的想法和遇到的一些坑，因为antdadmin已经为我们封装好了登录页面。我们只需要使用它并改变它。打开首页scr/pages/login/Login.vue文件这里的逻辑是点击提交到获取表单的名称和密码然后在执行完登录函数后调用登录函数执行afterLogin函数现在我们来看登录Import{LOGIN,ROUTES}from'@/services/api'import{request,METHODinsrc/services/user.js,removeAuthorization}from'@/utils/request'/***登录服务*@paramname账户名*@parampassword账户密码*@returns{Promise>}*/exportasyncfunctionlogin(name,password){returnrequest(LOGIN,METHOD.POST,{user_name:name,password:password})}exportasyncfunctiongetRoutesConfig(){返回请求(ROUTES,METHOD.GET)}/***注销*/exportfunctionlogout(){localStorage.removeItem(process.env.VUE_APP_ROUTES_KEY)localStorage.removeItem(process.env.VUE_APP_PERMISSIONS_KEY)localStorage.removeItem(process.env.VUE_APP_ROLES_KEY)removeAuthorization()}exportdefault{log,logout,getRoutesConfig}这里通过返回的用户名和密码发送请求。功能请求被封装。我相信每个人都能理解。把参数的键值改成自己的接口就行了。getRoutesConfig()这个函数是用来动态获取路由的，我这里获取的是静态本地路由，所以暂时不需要LOGIN的值。请求地址写在api.js中，方便管理//跨域代理前缀constAPI_PROXY_PREFIX='/api'constBASE_URL=process.env.NODE_ENV==='生产'?process.env.VUE_APP_API_BASE_URL:API_PROXY_PREFIX//constBASE_URL=process.env.VUE_APP_API_BASE_URLmodule.exports={LOGIN:`${BASE_URL}/Login/index`,ROUTES:`${BASE_URL}/routes`}我需要发送一个request，所以使用代理将LOGIN的后缀改为你登录的界面，到这里我们的登录操作其实已经完成了，但是还需要处理afterLogin的数据，让我们回到登录页面this.logging=falseconstloginRes=res.dataif(loginRes.code>=0){const{user,permissions,roles}=loginRes.datathis.setUser(user)this.setPermissions(permissions)this.setRoles(角色)setAuthorization({token:loginRes.data.token,expireAt:newDate(loginRes.data.expireAt)})//获取路由配置getRoutesConfig().then(result=>{constroutesConfig=result.data.dataloadRoutes(routesConfig)this.$router.push('/dashboard/workplace')this.$message.success(loginRes.message,3)})}else{this.error=loginRes.message}}我们重点关注afterLogin函数的逻辑，就是登录后存储信息。user是用户的基本信息，包括昵称、头像等。permissions是用户的权限信息，包括用户可以进行哪些操作。roles是用户的角色信息，可以通过roles访问权限管理的官方写法是login的返回接口必须包含这个信息，数据格式必须一致，因为我们只指定了一个简单的roleid，所以这里我们需要在这里重新处理它。注意，如果不使用动态路由配置，可以使用getRouterConfig函数DeletedafterLogin(res){this.logging=falseconstloginRes=res.dataconsole.log(loginRes.data.token)if(loginRes.code>=0){//const{user,permissions,roles}=loginRes.dataletuser={地址:'河北',头像:"https://gw.alipayobjects.com/zos/rmsportal/ubnKSIfAJTxIgXOKlciN.png",name:'admin',}letpermissions=[{id:'form',//权限IDoperation:['add','delete','edit','close']//权限下的操作权限}]letroles=[{id:'test',//角色IDoperation:['add','delete','edit','close']//角色操作权限}]this.setUser(user)this.setPermissions(permissions)this.setRoles(roles)setAuthorization({token:loginRes.data.token})this.$router.push('/publicStore')this.$message.success(loginRes.message,3)}else{this.error=loginRes.message}}，因为现在只有admin的概念，所以我把rolefirst这里的坑是permission和role的类型必须是数组或者直接写一个简单的字符串如permission='form'。我先看了文档，直接把文档的内容复制粘贴了。登陆后一直报错，没有显示路线。后来发现角色和权限其实都是数组