1、路由登录拦挡

首先在路由index.js文件中须要挂载路由导航守卫，其中to为将要拜访的门路，from为代表从哪个门路跳转，next是一个函数，示意放行，即进行跳转。

当跳转门路为登录界面时，则进行跳转，若sessionStorage中含有token，则间接登录，若不含有token，则跳转到登录界面。

复制代码
router.beforeEach((to,from,next)=>{
if(to.path==='/login') return next()
//获取token
const tokenStr = window.sessionStorage.getItem('token')
if(!tokenStr) return next('/login')
next()
})
复制代码
当登陆胜利后，将服务器返回的token保留到sessionStorage，因为token在localStorage中是短暂放弃的，而sessionStorage是仅在会话期间保留，所以抉择将token保留在sessionStorage中。

复制代码
login() {
this.$refs.loginFormRef.validate(async valid => {

   if (!valid) return;   //验证胜利则发送登录申请（{data:res}解构赋值出data，）   const { data: res } = await this.$http.post('login', this.loginForm);   if (res.meta.status !== 200) return this.$message.error('登录失败!');   this.$message.success('登录胜利');  //弹框成果   window.sessionStorage.setItem('token', res.data.token);   //通过编程式导航跳转到后盾主页，路由地址是/home   this.$router.push('home')

})
}
复制代码
为了使得我的项目中除了登录之外的其余API接口，都必须在登陆后能力拜访到，所以须要用到拦截器。在axios的interceptors中进行配置。为每一个申请header带上token。

axios.interceptors.request.use(config=>{ //申请拦挡
//为申请头对象增加token验证的Authorization字段
config.headers.Authorization = window.sessionStorage.getItem('token')
return config
})
当退出登录时，只须要将sessionStorage中的token革除，而后跳转到登录界面即可。

logout() {

  window.sessionStorage.clear()  //删除token  this.$router.push('/login')    //回到登录页

},
2、表单的验证规定

采纳Element-UI组件，首先进行引入各组件，通过Vue.use()全局注册组件，以下为表单内的各个组件和对应的验证规定，

复制代码
<el-form label-width="0px" ref="loginFormRef" class="login_form" :model="loginForm" :rules="loginFormRules">

<!-- 用户名 --> <el-form-item prop="username">     <el-input prefix-icon="iconfont icon-user" v-model="loginForm.username"></el-input></el-form-item><!-- 明码 --><el-form-item>      <el-input prefix-icon="iconfont icon-3702mima" v-model="loginForm.password" type="password"></el-input></el-form-item><el-form-item class='btns'><!-- 按钮 -->     <el-button type="primary" @click="login">登录</el-button>     <el-button type="info" @click="resetLoginForm">重置</el-button></el-form-item>

</el-form>
复制代码
复制代码
//表单的验证规定
loginForm: {

 username: 'admin', password: '123456'

},
loginFormRules: {

username: [    { required: true, message: '请输出登录名称', trigger: 'blur' },    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }],password: [    { required: true, message: '请输出登录明码', trigger: 'blur' },    { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }]

}
复制代码
3、实现成果