vue+ElementUI后台管理系统

一、登录/退出功能

若前端与后台存在跨域问题，则使用token

否则，使用cookie/session方式

token:(本地 + vuex)

编程式导航，顾名思义，就是在业务逻辑代码中实现导航。

this.$router.push(/home);

3.3路由导航守卫（路由的钩子函数）控制访问权限

如果用户没有登录，但是直接通过URL访问特定页面，需要重新导航到登陆页面

// 挂载路由导航守卫
router.beforeEach((to, from, next) => {
  // to:将要访问的路径
  // from：代表从哪个路径跳转而来
  // next：是一个函数，表示放行
  //     next() 放行    next(/login)强制放行
  if (to.path == "/login") {
    return next();
  }
  // 获取token
  const tokenStr = window.sessionStorage.getItem("token");
  if (!tokenStr) {
    return next("/login");
  }
  next();
});

路由的钩子函数

我们可以直接在路由配置文件（/src/router/index.js）中写钩子函数。但是在路由文件中我们只能写一个beforeEnter,就是在进入此路由配置时。先来看一段具体的代码：

{
      path:/params/:newsId(\d+)/:newsTitle,
      component:Params,
      beforeEnter:(to,from,next)=>{
        console.log(我进入了params模板);
        console.log(to);
        console.log(from);
        next();
},

在配置文件中的钩子函数，只有一个钩子-beforeEnter

如果我们写在模板中就可以有两个钩子函数可以使用：

beforeRouteEnter：在路由进入前的钩子函数。 beforeRouteLeave：在路由离开前的钩子函数。

export default {
  name: params,
  data () {
    return {
      msg: params page
    }
  },
  beforeRouteEnter:(to,from,next)=>{
    console.log("准备进入路由模板");
    next();
  },
  beforeRouteLeave: (to, from, next) => {
    console.log("准备离开路由模板");
    next();
  }
}
</script>

(1) 进度条：

/

(2) 三级分类表格（vue-table-with-tree-grid）见项目vueAdmin

(3) 富文本编辑器（Vue-Quill-Editor）

(4)loadsh的两种用法：

一、提交时，本来是数组，出来成了字符串，但是表单需要的是数组：（loadsh）

安装：

$ npm i -g npm
$ npm i --save lodash

引用：

import _ from loadsh

二、echarts options合并

可以添加角色

点击分配权限按钮，获取权限树型结构，加载当前角色已有的权限，

权限

概念

（1）动态导航--获取导航数据

（2）不同角色用户登录，显示对应权限

（3）导航守卫

重点：

步骤：

（1）router文件夹下建立permission.js

（2）router文件夹下建立dynamic-router.js(全部的路由地址)

（3）utils文件夹下建立recursion-router.js

修改：caches.children[0].name改为v..children[0].name

（4）store文件夹下modules下建立permission.js