vue-clic&ElementUI小项目(下) 路由守卫功能 修改用户权限 shiro授权 axios拦截器自动添加token 全局 axios模块 axios统一设置服务器请求路径

一、添加讲师

 

 

 

二、修改讲师

 

 

 

三、用户列表

 

 

 

四、添加用户

 

 

 

五、修改用户

 

 

 

 

六、首页树形导航

 

 

 

1、修改权限实体类

 

 

 

2、组合所需数据

  /**
     * 获得指定用户的资源菜单
     * @param request
     * @return
     */
    @GetMapping("/menu")
    public ResponseResult<Object> findPermsByUserName(HttpServletRequest request){
        //获得请求头中的token
        String token = request.getHeader("Authorization");
​
        //根据token获得用户名
        String username= JwtTokenUtils.getUserId(token);
​
        List<Perms> permsList=permsService.findPermsByUserName(username);
        if(permsList!=null && permsList.size()>0) {
            //保存父级菜单
            List<Perms> firstPerms = new ArrayList<>();
            for (Perms perms : permsList) {
                if (perms.getParentid() == null) {
                    //当前菜单是父级菜单，保存到父级集合中
                    firstPerms.add(perms);
                }
            }
​
            for (Perms first : firstPerms) {
                //获得每个父节点的子节点
                List<Perms> childrenPerms= new ArrayList<>();
                for (Perms perms : permsList) {
                    if (first.getId() == perms.getParentid()) {
                       childrenPerms.add(perms);
                    }
                }
                first.setChildren(childrenPerms);
            }
            return new ResponseResult<Object>(firstPerms,200);
        }
        return new ResponseResult<>(500,"你没有可用菜单，请联系管理员");
    }

3、修改vue首页

​ js部分

export default {
  name: "Home",
  data(){
    return{
      menuData:[]
    }
  },methods:{
    loadMenu(){
      let token=localStorage.getItem("token");
      axios.get("http://127.0.0.1:8088/perm/menu",
        {
          headers: {"Authorzation": token}
        })
        .then(result=>{
          if(result.data.code==200) {
           this.menuData=result.data.data;
          }else {
            this.$message({message:result.data.msg,type:'warning',duration:3000});
          }
        })
    }
  },created() {
    this.loadMenu();
  }
}

页面部分

  <el-menu
        default-active="1"
        class="el-menu-vertical-demo"
        background-color="#545c64"
        text-color="#FFFF"
        active-text-color="#ffd04b"
        :router="true"><!-- :router="true"是否启用路由模式，如果启用，根据导航组件中的index属性的值进行跳转-->
        <el-submenu :index="item.id+''" v-for="item in menuData" :key="item.id+''">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span slot="title">{{ item.name }}</span>
          </template>
          <el-menu-item-group>
            <el-menu-item :index="chil.link" v-for="chil in item.children" :key="chil.id">{{chil.name}}</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>

 

4、树形菜单数据第一次不显示问题

这个问题是因为异步加载 还没有完成，但是界面已经完成了，所以要让界面等待异步加载完成后再执行

 // $nextTick （）  当异步对话框 完全加载之后（在页面完全被渲染之后，才执行nextTick里面的回调） 
      this.$nextTick(()=>{
        // this.$axios.get("url",{}).then(res=>{
           this.$refs.tree.setCheckedKeys([16,31]);//将选中数据更新到Tree
        // })
      });

<font color=blue>修改获得用户权限方法</font>

 

 

 

 

<font color=blue>修改权限列表对话框弹出方法</font>

 

 

 

 

 

七、路由守卫

vue-router 提供了能让你在导航发生之前运行某些代码的功能，并且遵照你的意愿去取消导航，或将用户导航到其它地方。

路由守卫最常见的使用场景就是『登录』认证和『权限』认证

在路由对象router中，有一个方法beforeEach()

语法：
router.beforeEach((to, from, next) => {
  // ...
});
​
该守卫被传入 3 各参数：to 、from 以及 next ：
Route to
   要跳转到的目的地
Route from
    从哪一个地址来(从哪里来)
Function next
    回调函数，通过 next 回调函数你可以让 vue-router 去处理导航、取消导航、重定向到其它地方或执行其它操作。
    一定要调用 next 方法。因为直到调用 next 方法之前，路由行为的状态将一致处于等待状态，永远不会被解析（resolved）。
    如果next()没有带参数则表示放行url，如果next()中带了参数则控制要跳转到要过去的url

修改router.js

 

 

 

 

八、登出功能

<font color=red>前后端分离的项目中，只需要在前端将保存在浏览器中的token删除就表示用户退出了项目。</font>不需要在服务器端操作。

 

 

 

九、给用户分配权限

 

 

 

1、递归获得权限数据

 /**
     * 获得所有权限
     * @return
     */
    @GetMapping("/all")
    public ResponseResult<Object> findRight(){
        List<Perms> permsList=permsService.findPerms();
        //保存一级节点
        List<Perms> rootNode=new ArrayList<>();
        //获得一级节点
        for(Perms perms : permsList){
            if(perms.getParentid()==null){
                rootNode.add(perms);
            }
        }
​
        //根据一级节点找子节点
        for(Perms item:rootNode){
            item.setChildren(getChildrenNode(item.getId(),permsList));
        }
        return new ResponseResult<>(rootNode,200);
    }
​
    /**
     * 获得一级节点的子节点
     * @return
     */
    public  List<Perms> getChildrenNode(Integer id,List<Perms> perms){
        List<Perms> childrenList=new ArrayList<>();
        for(Perms item:perms){
            if(item.getParentid()==id){
                childrenList.add(item);
            }
        }
        
        //获得子元素的子对象
        for(Perms p:childrenList){
            p.setChildren(getChildrenNode(p.getId(),perms));
        }
​
        if(childrenList.size()==0){
            return null;
        }
        return childrenList;
    }

2、修改用户权限

​ <font color=red>获得用户的新权限后，要先将用户的原权限全部删除，删除后重新添加权限</font>

 

十、Shiro授权

​ 1、查询登录用户所有的资 源权限

​ 2、修改shiro自定义Realm类

/**
 * 自定义realm，用来使用jwt做认证
 */
public class JwtRealm extends AuthorizingRealm {
    @Autowired
    private IPermsService permsService;
    
    /**
     * 授权
     * @param principalCollection
     * @return
     */
    @Override
    protected AuthorizationInfo doGetAuthorizationInfo(PrincipalCollection principalCollection) {
      //获得token
        String token=principalCollection.getPrimaryPrincipal().toString();
        //获得用户名
        String username=JwtTokenUtils.getUserId(token);
        //获得资源权限
        Set<String> perms=permsService.findRightByUserName(username);
        SimpleAuthorizationInfo authorizationInfo=new SimpleAuthorizationInfo();
        authorizationInfo.setStringPermissions(perms);
        return authorizationInfo;
    }
}

3、修改controller

在controller方法上添加授权注解

 

 

 

十一、axios拦截器

我们每次对服务器发送请求都要将token手动发送，可以配置axios的拦截器，将请求进行拦截，然后将token添加到请求中，不用每次都将token带过去。

1、配置axios拦截器实现token自动添加

<font color=blue>修改main.js</font>

//每次都要添加 token
axios.interceptors.request.use(
  function(config) {
    config.headers.Authorization = localStorage.getItem('token')
    return config
  },
  function(error) {
    // Do something with request error
    return Promise.reject(error)
  }
)

<font color=blue>将请求中的token代码删除</font>

 

 

 

2、解决每个组件中都要引入axios模块

<font color=blue>修改main.js</font>

//axios的第二个问题：每个组件内部都要引入axios  ，每个组件其实也是一个vue实例
Vue.prototype.$axios=axios

3、axios统一设置服务器请求路径

<font color=blue>修改main.js</font>

// axios的第一个问题： 每次请求都要添加基准路径
axios.defaults.baseURL = "http://localhost:8088/"

<font color=blue>修改发送请求的路径</font>