VPC
1.0.0
Control de permisos de Vue
Un sistema backend para la gestión unificada de derechos de usuario front-end de inicio de sesión desarrollado en base a vue
# install node+git please
# install dependencies
$ npm install / cnpm install
# serve with hot reload at localhost:8060
$ npm run dev
# build for production with minification
$ npm run build
idea básica
El front-end realiza el control de permisos, que no es más que transmitir datos al fondo. He visto que la mayoría de los proyectos tienen el concepto de roles. Los roles que deben desacoplarse se proponen artificialmente. De hecho, el front-end solo mira los datos y extrae los permisos. Se asignan diferentes roles de identidad al front-end en diferentes matrices y luego se combinan con todas las rutas locales para devolver un menú. para mostrar al usuario.
Una vez que vue-cli inicializa el proyecto, se compone de componentes de esqueleto modular: Inicio de sesión + Inicio, encabezado, barra lateral, Inicio y el contenido comercial se puede colocar en el contenido de Hoem.
VPC es adecuado para el inicio de sesión unificado de múltiples proyectos. El token válido devuelto después de un inicio de sesión exitoso en la página de inicio de sesión se realiza en el segundo paso para obtener los datos del usuario. Teniendo en cuenta el problema de actualización, se deben colocar los datos del usuario. en el componente raíz App.vue Debido a que Vue es una idea de flujo unidireccional, el inicio de sesión, como subcomponente de la aplicación, debe emitir $ a la aplicación después de iniciar sesión correctamente y ejecutar la devolución de llamada para obtener los datos del usuario.
Como se mencionó anteriormente, este proyecto utiliza datos simulados fáciles de simular. Las regulaciones de datos de back-end utilizan el protocolo RestFul para simular a varios usuarios con diferentes identidades. El inicio de sesión exitoso devuelve 200, la invalidación del token 401. El inicio de sesión exitoso devuelve el token. a través de flyio. Recuerde que esta es la primera vez. Después de agregarlo a la página de inicio de sesión, debe agregar un token para cada llamada de interfaz, lo que se puede hacer en el interceptor de flyio.
Devuelve la matriz de permisos en la página de la aplicación a través de fullPath recursivo. Todas las operaciones de enrutamiento local obtienen la ruta efectiva del usuario y la guardan en Vuex.
En la barra lateral para el bucle, se muestra la ruta efectiva almacenada en vuex y se muestra el componente Inicio para mostrar el contenido específico de la ruta.
│
├─build
│ build.js
│ check-versions.js
│ utils.js
│ vue-loader.conf.js
│ webpack.base.conf.js
│ webpack.dev.conf.js
│ webpack.prod.conf.js
│
├─config
│ dev.env.js
│ index.js
│ prod.env.js
│
├─src
│ │ 404.vue
│ │ App.vue // 根组件
│ │ bus.js // EventBus 适用于兄弟组件 通信
│ │ dave.js // canvas 效果
│ │ globar.js // webpack 全局注册ui组件
│ │ main.js // 项目入口
│ │ tools.js // 插件
│ │
│ ├─api
│ │ axios.js
│ │ common.js // 基本接口
│ │ request.js // flyio 拦截器
│ │ weather.js // 天气接口
│ │
│ ├─assets
│ │ │ logo.png
│ │ │
│ │ └─theme-dave // 自定义主题
│ │
│ ├─components // 主要组件
│ │ ├─common
│ │ │ Header.vue
│ │ │ Home.vue
│ │ │ Login.vue
│ │ │ SideBar.vue
│ │ │
│ │ ├─render // render 渲染组件 适用多条件渲染
│ │ │ btn-render.vue
│ │ │
│ │ ├─ui
│ │ │ baseButton.vue // 基于element-ui btn ui组件 可层叠复用
│ │ │
│ │ └─view
│ │ 403.vue
│ │ 404.vue
│ │ allocation.vue
│ │ render.vue
│ │ watch.vue
│ │
│ ├─router // 本地所有路由
│ │ fullPath.js
│ │ index.js // 基本路由
│ │
│ └─store // 状态管理 全局变量
│ actions.js
│ getters.js
│ index.js
│ mutations.js
│ state.js
│
│ .babelrc
│ .editorconfig
│ .eslintignore
│ .eslintrc.js // 基于airbnb-base 个人配置的代码规则
│ .gitignore
│ .postcssrc.js
│ index.html
│ package-lock.json
│ package.json
│ README.md
< router-view @login =" login " @clearData =" clearData " > </ router-view > El código se adhiere al propósito de una entrada y una salida.
clearData ( ) {
if ( this . $route . path === '/login' ) {
delete request . config . headers [ 'Authorization' ] ;
localStorage . removeItem ( 'token' ) ;
this . $store . dispatch ( 'CLEAR_STORE' ) ;
}
} La respuesta de interceptación global de Flyio volverá a la página de inicio de sesión siempre que el usuario no válido acceda a la página y llame al código de estado de falla de la interfaz y devuelva 401.
if ( err . response . status === 401 ) {
window . location . href = '/#/login' ;
} alias: {
'vue$' : 'vue/dist/vue.esm.js' ,
'@' : resolve ( 'src' ) ,
'flyio' : 'flyio/dist/npm/fly'
}
artefacto del paquete web require.context
externals: {
vue : 'Vue' ,
'element-ui' : 'ElementUI' ,
nprogress : 'NProgress' ,
jquery : 'window.$'
}
Para obtener más información, visite el sitio web oficial de Travis CI. Nota:
Análisis del uso de comunicación de componentes de Vue
1.Vuex: modo de gestión de estado, gestión de almacenamiento centralizada del estado de todos los componentes de la aplicación y reglas correspondientes para garantizar que el estado cambie de forma predecible. 2.EventBus: la comunicación de componentes secundarios y no principales utiliza centros de eventos para permitir componentes Reproducción de casos de comunicación gratuita: ¿Qué debo hacer cuando, por ejemplo, cambio el valor de un atributo variable en el componente Encabezado de este proyecto y necesito que los componentes SideBar y Home respondan al cambio? 3. Análisis: Vuex, como sugiere el nombre, administra variables globales. Aquí es administración, no de solo lectura, que es legible, modificable y detectable. Primero, introduzcamos los dos atributos de ECMAScript. : atributos de datos y atributos de acceso Es decir, lo que los atributos de datos cambian y leen es solo el valor del objeto, y las últimas propiedades del accesor [Configurable]], [[Enumerable]], [[Get]], [[Set], en JavaScript usamos Object .defineProperty para definir el acceso Para obtener this.person en Vue, el atributo del dispositivo es llamar al método get para configurarlo, que es el método set. Vue tiene su propio árbol de datos. Es a través del atributo de acceso que se implementa la vigilancia de seguimiento de dependencias. Además de Vuex EventBus, Vue.prototype.xx y this.$root y las variables del componente de operación localStorage no tienen la función de vigilancia.
4. Resumen: Vue.prototype.xx, this.$root solo se puede leer y cambiar. Puede modificar y leer en el prototipo de Vue, pero no puede mirar. Vue.prototype.xx puede escribir variables globales para calibración y verificación. Los valores, etc. también operan en localStorage. Puede leer la configuración. Algunas personas dicen que puede usar addEventListener para monitorear el almacenamiento, pero no espera hacer esto en la capa Vue. El token de este proyecto es usar almacenamiento local. vuex. Necesitamos que las variables sean predecibles y luego ejecutar la devolución de llamada. Si cree que tiene problemas, simplemente use los componentes hermanos de EventBus para comunicarse y $emit activa la devolución de llamada $on listening.
El enfoque de este proyecto no es la necesidad de componentes de fondo enriquecidos, sino la idea del control de enrutamiento de permisos. Es solo construir un esqueleto para resumir su trabajo. Más adelante, se agregarán más componentes encapsulados al proyecto. "proyecto" más sustancial y sólido.
