vue路由守卫,axios拦截器,权限树

K15项目案例-后台

1.分页问题

关于分页表格列中的序号问题:

<el-table-column type="selection" label="序号" width="80" align="center"></el-table-column>

复选框 

index 则显示该行的索引(从 1 开始计算)

<el-table :data="teacherData" style="width: 100%;margin-top:10px;">
            <el-table-column type="index" :index="indexMethod" label="序号" width="80" align="center"></el-table-column>
</el-table>


//为type=index 属性指定生成规则
indexMethod(index){
return (index+1)+this.pageSize*(this.currentPage-1);
},

2.添加讲师

首页Home.vue  [父组件  router-view]

   |-讲师列表Teacher.vue 父组件

        |-AddTeacher.vue  添加讲师 - 子组件

        |-EditTeacher.vue  编辑讲师 - 子组件

TeacherController:

//添加讲师
@PostMapping("/teacher/add")
public ResponseResult<Void> addTeacher(@RequestBody Teacher teacher){
    teacher.setHiredate(new Date());
    teacher.setStatus("y");
    boolean flag = teacherService.save(teacher);
    ResponseResult<Void> result = null;
    if(flag){
        result =  new ResponseResult<>(null,"OK",200);
    }else{
        result =  new ResponseResult<>(null,"Error",500);
    }
    return result;
}

confirmAdd(){
    this.teacher.isfamous = this.teacher.isfamous==true? 'y':'n';

    // 发送 axios请求
    this.$axios.post('/api/teacher/add',this.teacher,
                     {headers:{strToken:window.localStorage.getItem("strToken")}})
        .then(res=>{
        console.log(res.data);
        if(res.data.status==200){
            this.$message({
                type: 'success',
                message: '添加讲师成功!',
                offset:300,
                duration:1000  //显示的时间,ms
            });
        }else{
            this.$message({
                type: 'danger',
                message: '添加讲师失败!',
                offset:300,
                duration:1000  //显示的时间,ms
            });
        }
    }).catch(()=>{
        alert('error')
    });
    this.addTeacherdialogFormVisible = false;
    //调用父组件传来的方法
    this.$emit('func');
}

3.编辑讲师 - 分析思路

ElementUI日期字段报错

解决方法:

npm uninstall element-ui
npm install element-ui@2.15.6 -s

4.删除讲师

 //删除讲师
@RequestMapping("/teacher/delete")
public ResponseResult<Void> deleteTeacher(Integer id){
    boolean flag = teacherService.removeById(id);
    ResponseResult<Void> result = null;
    if(flag){
        result =  new ResponseResult<>(null,"OK",200);
    }else{
        result =  new ResponseResult<>(null,"Error",500);
    }
    return result;
}

//处理'删除'
handleDelete(id) {
    this.$confirm('您确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        // 发送 axios请求
        this.$axios.get('/api/teacher/delete',
                        {params:{id:id},headers:{strToken:window.localStorage.getItem('strToken')}})
            .then(res=>{
            console.log(res.data);
            if(res.data.status==200){
                this.$message({
                    type: 'success',
                    message: '删除讲师成功!',
                    offset:300,
                    duration:1000  //显示的时间,ms
                });
                //删除后刷新列表
                this.findTeacherList(1);
            }
        }).catch(()=>{
            alert('error')
        });
    }).catch(()=>{});

},

5.权限测试

 //删除讲师
@RequestMapping("/teacher/delete")
@PreAuthorize("hasAnyAuthority('teacher:delete')") //必须拥有的权限标识符才能执行方法
public ResponseResult<Void> deleteTeacher(Integer id){
    boolean flag = teacherService.removeById(id);
    ResponseResult<Void> result = null;
    if(flag){
        result =  new ResponseResult<>(null,"OK",200);
    }else{
        result =  new ResponseResult<>(null,"Error",500);
    }
    return result;
}

如果不具有权限,则提示信息

//处理'删除'
handleDelete(id) {
    this.$confirm('您确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        // 发送 axios请求
        this.$axios.get('/api/teacher/delete',
                        {params:{id:id},headers:{strToken:window.localStorage.getItem('strToken')}})
            .then(res=>{
            console.log(res.data);
            if(res.data.status==200){
                this.$message({
                    type: 'success',
                    message: '删除讲师成功!',
                    offset:300,
                    duration:1000  //显示的时间,ms
                });
                //删除后刷新列表
                this.findTeacherList(1);
            }else if(res.data.status==4001){
                this.$message({
                    type: 'error',
                    message: res.data.msg,
                    offset:500,
                    duration:1000  //显示的时间,ms
                });
            }
        }).catch(()=>{
            alert('error')
        });
    }).catch(()=>{});
}

6.路由守卫

作用:实现权限管理,没有登录不能进入后台首页

在router/index.js中添加配置

//守卫路由
router.beforeEach((to,from,next)=>{
    if(to.path === '/login'){ //如果请求的path为login 
      next(); //放行
    }
    else{ //否则，路由的path不是请求login
      const token = localStorage.getItem('strToken');  //获取token
      token ? next() : next('/login') //如果取到了，放行，没有取到转路径login
    }
  })

7.axios拦截器

作用:避免每次请求都带token

step1:定义axiosutil.js工具

import axios from 'axios'

export const request = (config) => {
  return axios(config)
}

// 请求前设置header  添加请求拦截器，在请求头中加token
axios.interceptors.request.use(
  config => {
    if (localStorage.getItem('strToken')) {
      config.headers.strToken = localStorage.getItem('strToken')
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 请求完成后 拦截器 token过期或失效处理
axios.interceptors.response.use(
  response => {
    console.log(response)
    return response
  },() => {
      // 获取错误状态码，token失效
      // 清除token
      localStorage.removeItem('strToken')
      // 重新跳转到login页面
      router.push('/login')
  }
)
export default axios

step2:在main.js导入工具

import axios from '@/utils/axiosutil.js'

8.动态导航菜单实现

step1:  确定不同的用户查询不到的菜单数据

SELECT p.* FROM rbac_perms p INNER JOIN rbac_user_perm up ON p.id=up.permid
                             INNER JOIN rbac_user u ON u.id=up.userid
                             WHERE u.username='zhangsan' AND TYPE='m'
                             

SELECT p.* FROM rbac_perms p INNER JOIN rbac_user_perm up ON p.id=up.permid
                             INNER JOIN rbac_user u ON u.id=up.userid
                             WHERE u.username='lisi' AND TYPE='m'   
                             
                                                       

SELECT p.* FROM rbac_perms p INNER JOIN rbac_user_perm up ON p.id=up.permid
                             INNER JOIN rbac_user u ON u.id=up.userid
                             WHERE u.username='admin' AND TYPE='m'

编写PermsController,根据用户名询用户的菜单列表

@RequestMapping("/perms/list")
public ResponseResult<List<Perms>> getPermsListByUsername(String username){
    List<Perms> allMenu = permsService.findPermsListByUsername(username);

    //用于存放所有菜单父节点
    List<Perms> parentNodes = new ArrayList<>();
    for(Perms perms : allMenu){
        if(perms.getParentid()==null){
            parentNodes.add(perms);
        }
    }

    //为每个父节点添加子节点
    for(Perms parent : parentNodes){
        List<Perms> children = new ArrayList<>();
        //迭代所有的节点,找出属于当前父节点的孩子
        for(Perms perms : allMenu){
            if(perms.getParentid() == parent.getId()){
                children.add(perms);
            }
        }
        if(children.size()>0) {
            //为每个父节点设置children
            parent.setChildren(children);
        }
    }

    return new ResponseResult<List<Perms>>(parentNodes,"OK",200);
}

9.权限树数据加载

步骤1:实现用户列表功能

步骤2:查看某个用户的"权限分配"对话框

a. 查看用户列表组件时,钩子函数created()查所有的权限

b. 在前端页面加载权限树

c. 将当前用户相关权限勾选中

权限树组件

    <!-- 对话框 -->
    <el-dialog title="权限分配" :visible.sync="rightDialogFormVisible">
        <!-- 
            data  树形数据
            show-checkbox 表示显示复选框
            node-key 树形节点中的key值 -唯一 ,默认为Data数据模型中的id值
           default-expanded-keys 默认展开键
           check-strictly   在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false
            default-expand-all  是否默认展开所有节点
         -->
        <el-tree ref="permsTree"
            :data="treeData"
            show-checkbox
            node-key="id"
            :check-strictly="true"
            :default-expand-all="true"
            :props="defaultProps">
        </el-tree>
        <div slot="footer" class="dialog-footer">
            <el-button @click="rightDialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="assignRight">确 定</el-button>
        </div>
      </el-dialog>

权限树参数

  //权限树
            treeData: [],
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            userid:0,
            rightDialogFormVisible:false

权限树选中

openRightDialog(id){ //打开权限分配对话框
            this.rightDialogFormVisible=true;
            this.userid = id;
            //加载权限树,同时,将当前用户的权限选中
            this.$axios.get("/api/user/getPermsByUserid",{params:{id:id}}).then(res=>{
                console.log(res.data);
                this.$nextTick(() => { //等待DOM对象创建完成
                    this.$refs.permsTree.setCheckedKeys(res.data.data); //设置选中
                });
            }).catch(()=>{

            })