1009vue主页面的编写，token，

要使用vue消息提示，首先在element.js文件下导入并注册

没有结构之前，我们不能直接在前台得到数据

所以我们进行解构

 

 然后根据返回结果，进行消息提示

 新建组件，导入组件，配置路由

配置好路由之后，我们跳转到主页面

 但是上面的操作，我们不论token有没有，都是可以访问主页的，所以我们要写一个守卫，必须要有token，才可以访问

next后面有括号，下图有错。

 登录有了，如果我们想要注销，退出呢？

在主页面，我们使用element的布局容器，那么我们按需导入要使用的element元素，并且实现退出功能

 

 然后我们再来写左侧菜单栏

先去引用并注册要用的元素

解构获取后台的数据

 将数据通过遍历的形式，显示到模板当中

 

 动态生成菜单栏图标，与名字相对应

 加个样式

类似高亮的一组菜单显示

动态实现是否折叠

点击二级菜单，跳转到相应页面，现在是点击用户列表跳转，当我们点击刷新的时候，应该还是要锁定在二级菜单对应的页面，所以，我们要怎么做呢？

• 首先我们点击，触发绑定事件@click="xx()",括号里面是数据库当中二级菜单对应的路径/参数
  • 
• 然后我们需要将后端出过来的对应菜单的页面路径存到sessionStorage里面，点击时，通过函数将路由值（地址）保存到本地
  • 
  • 
• 然后创建的时候就拿到对应的路径，将数据源当中的当前路径改成sessionStorage里面拿到的地址，,同时在created里面申明
  • 
  • 
• 将上面修改过的的地址数据源，给到default-active，将本地的路由值动态的传给default-active，然后实现动态绑定
  • 
  • 默认是当前激活菜单的索引（此时并没有实现动态绑定），但是我们可以将索引改成我们刚刚设置的url地址
  • 
  • 设成绑定，冒号
    • 
• 效果：
  • 

在我们登陆以后，我们通常希望以后的每次url请求都带上认证信息，即让我们的服务器知道我们已经登陆。利用jwt（jsonWebToken）插件可以帮我们生成相应tokten

通过res将token信息交给前端，前端在获取到token信息后将token信息保存在sessionStorage中，最好是sessionStorage较localStorage安全，然后在axios拦截器其中将每次的请求头中写上token即可