vue + Element UI实现后台管理系统登录过程的实现

短命女 2023-05-28 05:20 98阅读 0赞

一、登录过程分析

  1. 在登录页面当中，引用Element UI中的input输入框，配置 :model="loginForm"，同时在列表项input输入框中结合v-model命令，v-model="loginForm.username"，实现双向数据绑定。对于data中的数据，也需要进行定义之前model所绑定的数据loginForm，这个也是录表单的数据绑定对象，在loginForm中定义具体的数据，比如username，这样在表单中通过loginForm.username拿到数据了。
  2. 对于登录表单的校验，当离开选项框的时候，验证是否合法，需要配置 :rules="loginFormRules"，进行配置绑定校验规则。在data中的数据，定义loginFormRules，在里面配置校验规则，比如username: []，里面就是具体的规则项，验证用户名是否合法。
  3. 当点击登录以后，通过@click="login"，触发登录事件，在methods中定义login函数，进行表单的预校验。如果预验证为false，那么就不发起请求。如果预验证为true，那么就发起登录请求。由于返回值是一个promise对象，异步的，所以可以结合async和await。通过状态码校验是否成功，如果成功，将登录成功之后的token，保存到客户端的sessionStorage。token只在当前网站打开期间生效，关闭网站之后不生效，所以token保存在sessionStorage中。通过编程式导航跳转到后台主页，路由地址是 /home。
  4. 如果在登录页面中，需要进行重置，通过@click="resetLoginForm"，触发重置事件。点击重置按钮，重置登录表单，可以通过Element UI中自带的一个resetFields()方法进行重置字段，通过ref可以拿到表单对象，再取到表单的所有数据，进行清除。

  5. 登录页面的完整代码 login.vue：

二、登录的导航守卫拦截

  1. 对于登录的导航守卫，如果用户未登录，就想要访问管理系统的页面，应该是进行拦截的，只有登录以后才能够访问页面，可以使用router.beforeEach()这个方法，进行导航守卫的拦截。
  2. router.beforeEach((to, from, next))中有三个参数，to 将要访问的路径，from 代表从哪个路径跳转而来的，next 是一个函数表示放行。如果用户访问的是登录页，直接放行。如果访问的管理系统的页面，那么从sessionStorage中获取保存的token值。如果token的值不存在，强制跳转到登录页。存在token，那么就放行。

  3. 路由页面的完整代码 router.js:

    import Vue from ‘vue’
    import Router from ‘vue-router’
    Vue.use(Router)

    const router = new Router({
    routes: [

    1. { 
    2.   path: '/',
    3.   redirect: '/login'
    4. },
    5. { 
    6.   path: '/login',
    7.   component: () => import('../components/Login.vue')
    8. },
    9. { 
    10.   path: '/home',
    11.   component: () => import('../components/Home.vue')
    12. }

    ]
    })

    // 挂载路由导航守卫
    router.beforeEach((to, from, next) => {
    // to 将要访问的路径
    // from 代表从哪个路径跳转而来的
    // next 是一个函数，表示放行
    // next() 放行 next(‘/login) 强制跳转到登录页
    // 如果用户访问的是登录页，直接放行
    if (to.path === ‘/login’) return next()
    // 从sessionStorage中获取保存的token值
    const tokenStr = window.sessionStorage.getItem(‘token’)
    // 如果token的值不存在，强制跳转到登录页
    if (!tokenStr) return next(‘/login’)
    // 存在token，那么就放行
    next()
    })

    export default router

发表评论

表情：
评论列表 （有 0 条评论，98人围观）

还没有评论，来说两句吧...

相关阅读