1 .完成登录功能1.1重置表单第一步：向表单中添加refel-form ref=' loginform '/El-form第二步：向重置按钮中添加和重置事件//重置表单reset form ((this.$ refs.loginform.reset fields ) ) 1.2表单预验证) /用户登录loginIn ) ) /验证表单的整体合法性} 1.3封装登录接口封装方法参考微信封装
1.3.1包环境地址const env={ //在线环境prod : { base URL : ' https://www.liulongbin.top :888 ' }、//开发环境dev : (base URL :65https://www.dev.top :8888//测试环境test :65https://www.test.top 33591.3. 2 /elmentUI组件import { message } from ' element-ui '//env.js import部署axios实例constservice=axios.create (/axios $ ) baseURL.prod.baseURL )/API/private/V1 `，tiivate //添加请求拦截service.interceptors.request.use (功能(cocon ) config ) if ) config.URL=='/login ' ) {//获取token并传递给请求标头的const token=session storage.getitem (' token ) /配置请求标头if 、函数(error )//请求错误returnpromise.reject(error )； )； //请求响应侦听返回service.interceptors.response.use (function (response ) console.log )响应侦听：'，response ) constres ) 204 ]轻型提示if (resultok.includes (RES.meta.status )/message ) (message3360RES.matus ) )的type : ' success ' 请检查()；function(error )//失败为returnpromise.reject ) error )； )； 导出默认服务； 1.3.3项目接口import request from './request'//包注册接口exportfunctionlogin(data ) returnrequest ) {URL:
1 .需求认证页面通常通过路由设置元
2 .路由保护：阻止跳转路由的元是否为自动标记
1.3.4记住上次访问的地址，登录后，再次返回上次访问的想法。 跳转到登录页面时，要访问的页面地址作为参数传递到登录页面，登录成功后，返回原始页码。
//卫士router.beforeeach((to，from，next )={console.log ) ' to: )，to//第一步： let flag=to.matched.) token () returnnext ) (/跳跃的根path: )/login )，具有通过/query传递的参数，query是对象query: ) redirect : to . 保持不变(next () else (next ) ) } )放入组件中。 let(redirect )=this.$ route.query this.$ router.push ) path 3360重定向ect
el-header
el-aside :解决溢出问题，去掉el-menu的右侧边框
. el-menu { border-right:none； } el-main
el-footer
EL菜单
el-header注销想法：第一步：清除token的第二步：跳转到登录页