vue elementUi权限管理

最新推荐文章于 2024-06-19 12:02:41 发布

原创

最新推荐文章于 2024-06-19 12:02:41 发布 · 1.4k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript #vue.js

这篇博客详细记录了使用Vue和ElementUI实现权限管理的过程。主要包括：1) 登录成功后将用户信息存储在Vuex的state；2) 通过Vuex的actions获取并处理数据，递归整理为所需格式；3) 在permission.js中利用router.beforeEach进行异步处理，确保权限检查生效。此教程可供需要进行Vue权限管理的开发者参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一次摸索着完成vue的权限管理，在此记录下自己搬砖的点点滴滴，希望以后回望的时候，有迹可循，也分享给需要的小伙伴们，参考哦~
思路如下：
1，登录成功后，把后台返回的用户信息，存vueX的state；
2，vueX的actions调接口，返回数据后，赋值给state，然后调用递归，来把返回的数据处理成我们要的格式
3，permission.js中router.beforeEach（）,调actions的方法，这里用到了异步执行，所以，需要调用actions的方法后，才能进行下一步，否则，会导致跳转失效

<!-- html的部分-->
 <el-button type="primary" @click="l`在这里插入代码片`ogin()">登陆</el-button>

// js的部分
 login() {
   
   
    ```````````````````````````````````````````
      // 请求接口
      api.login(params).then(res => {
        if (res.code == 200) {
          // 请求到数据后，存入token和id
          setToken(res.object.token, res.object.id);
          // 存用户名和姓名
          setUserName(res.object.name, res.object.username);

         `````````````````````````````

          // 1，登录成功后，把后台返回的用户信息，存vueX的state；
          if (res.object.sysNewMenuVoList.length > 0) {
   
   
            this.$store.commit("GetUserInfo", res.object.sysNewMenuVoList);
          } else {
   
   // 否则不让登陆
            this.$router.push("/login");
            this.$message.error(<