vue-element-admin 框架的动态路由，图形验证码和权限管理的前端的实现（注意只是前端,api接口没写）

最新推荐文章于 2024-07-02 10:19:04 发布

PJM~

最新推荐文章于 2024-07-02 10:19:04 发布

阅读量1.3k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_43780179/article/details/127910251

版权

本文介绍了在vue-element-admin框架中如何实现前端动态路由、图形验证码验证以及权限管理。动态路由在router/index.js配置，路由重定向在redirect/index.vue中处理。登录过程涉及表单验证、图形验证码校验，成功后在store的user.js中通过axios发送登录请求，获取token并存储。权限管理借助路由守卫和vuex，根据用户角色动态生成可访问的路由，具体实现代码位于src/store/modules/permission.js。

摘要由CSDN通过智能技术生成

动态路由实现首先在router/index.js定义动态路由

  {
    path: '/redirect',
    component: Layout,
    hidden: true,
    children: [
      {
        path: '/redirect/:path(.*)', // redirect是个动态路由 动态路由的配置方法,表示匹配零个或多个路由，比如路由为 /redirect 时，仍然能匹配到 redirect 组件。
        component: () => import('@/views/common/redirect/index')
      }
    ]
  }

然后就是路由重定向组件redirect/index.vue:

<script>
export default {
  created() {
    const { params, query } = this.$route
    const { path } = params
    this.$router.replace({ path: '/' + path, query })
  },
  render: function(h) {
    return h() // avoid warning message
  }
}
</script>

在登录组件的代码如下：

监听路由的变化代码如下:

    // 监听路由的变化
    $route: {
      handler: function(route) {
        // redirect后面的部分就会变成query
        const query = route.query;
        console.log(query)
        if (query) {
          // 将redirect提取出来同时将其他的参数放入到otherQuery 
          this.redirect = query.redirect
          this.otherQuery = this.getOtherQuery(query)
        }
      },
      // immediate ：在create的时候就会进行调用
      immediate: true
    }

首先绑定handleLogin函数

<el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">{
  { $t('login.logIn') }}</el-button>

点击登录按钮触发：

  handleLogin() {
      // 表单验证后触发里面的回调
      this.$refs.loginForm.validate(valid => {
      // 表单验证成功
        if (valid) {
          // 初始化验证
          this.initVerify = true
          this.$nextTick(() => {
            this.$refs.verify.show()
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }