【精讲】后台项目 采用vue2框架 完整版内含详细注释 1

简介

项目的内容主要讲述了四个权限，第一个权限是登录界面，登录时会采用全局守卫去辨别用户是管理员还是普通用户及是否具有权限的用户，第二个权限是菜单联动，这里非联动一种，主要权限展现在切换部分，每一个组件所展示的内容不同，有的组件是可以增删查改，非用户管理且是管理的组件账户的用户，部分权限是没有的，会通过动态路由的形式去控制，第三权限是点击按钮，很多公司都需要让一个按钮的页面显示出来，但不能作为对数据的增删查改，仅是隐藏，在这里我们采用的是对该数据进行了按钮操作的权限，非用户或管理员是没有权限去操作数据的。第三个权限是，当用户点击跳转到下一个页面时，在跳转的过程中就会向后台进行请求一次数据，在请求的过程中我们也做了请求拦截的操作，这里的操作主要是针对于你是否是该账户的管理员或使用者在使用，若是，那么便可以去操作，否则是没有权限，系统也会有一个弹窗提示您的。

首先是登录部分：

<template>
  <div class="login">
    <!-- 登录界面 跳转界面案例一 -->
    <!-- <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="400"> -->
    <!-- <g id="circle"> -->
    <!-- <text x="90"