1.路由登录拦截首先需要在路由index.js文件中挂载路由导航守卫，其中to是要访问的路径，from代表从哪个路径跳转，next是A函数，表示release，即，跳。当跳转路径为登录界面时，会跳转。如果sessionStorage包含令牌，它将直接登录。如果不包含token，则跳转到登录界面。复制代码router.beforeEach((to,from,next)=>{if(to.path==='/login')returnnext()//获取tokenconsttokenStr=window.sessionStorage.getItem('token')if(!tokenStr)returnnext('/login')next()})复制代码登录成功后，将服务器返回的token保存到sessionStorage中，因为token长期保存在localStorage中，并且sessionStorage只在session期间保存，所以选择将token保存在sessionStorage中。复制代码login(){this.$refs.loginFormRef.validate(asyncvalid=>{if(!valid)return;//验证成功发送登录请求（{data:res}解构并赋值数据，）const{data:res}=awaitthis.$http.post('login',this.loginForm);if(res.meta.status!==200)returnthis.$message.error('登录失败!');this.$message.success('登录成功');//弹框效果window.sessionStorage.setItem('token',res.data.token);//通过编程导航跳转到后台首页，并路由地址为/homethis.$router.push('home')})}复制代码为了让项目中除登录外的其他API接口，都必须在登录后访问，所以需要一个拦截器。在axios的拦截器中配置。为每个请求标头带上令牌。axios.interceptors.request.use(config=>{//请求拦截//在请求头对象中加入Authorization字段用于token校验config.headers.Authorization=window.sessionStorage.getItem('token')returnconfig})当退出登录时，只需要清除sessionStorage中的token，然后跳转到登录界面。logout(){window.sessionStorage.clear()//删除tokenthis.$router.push('/login')//回到登录页面},2.表单的验证规则使用Element-UIcomponent，首先引入的是每个组件，通过Vue.use()在全局注册该组件。以下是表单中的组件和相应的验证规则。复制代码itemprop="username">
