关于php:电商管理系统登录注册界面

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、实现成果