VPC

VPC

Controle de permissão Vue

Descrição do projeto

Um sistema de back-end para gerenciamento de direitos de usuário front-end de login unificado desenvolvido com base em vue

Endereço do projeto

• Dave-vento

Construir

 # 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

Análise de projeto

Ideia básica

Conceber

O front-end faz o controle de permissão, que nada mais é do que transmitir dados para o segundo plano. O front-end faz julgamentos. Tenho visto que a maioria dos projetos tem o conceito de funções. de funções que precisam ser desacopladas é proposta artificialmente. Na verdade, o front-end apenas analisa os dados e extrai as permissões. Diferentes funções de identidade são fornecidas ao front-end em matrizes diferentes e então combinadas com todas as rotas locais para retornar um menu. para exibir ao usuário.

esqueleto

Depois que o vue-cli inicializa o projeto, ele é composto por componentes de esqueleto modular: Login + Home Header Sidebar Home e o conteúdo comercial pode ser colocado no conteúdo Hoem.

Conecte-se

O VPC é adequado para login unificado de vários projetos. O token válido retornado após o login bem-sucedido na página de Login é executado na segunda etapa para obter os dados do usuário. Considerando o problema de atualização, a obtenção dos dados do usuário deve ser colocada. no componente raiz App.vue Como o Vue é uma ideia de fluxo unidirecional, o Login, como um subcomponente do aplicativo, precisa $emit para o aplicativo após o login bem-sucedido e executar o retorno de chamada para obter os dados do usuário.

Simulação de interface

Conforme mencionado acima, este projeto usa dados simulados de simulação fácil. Os regulamentos de dados de back-end usam o protocolo RestFul para simular vários usuários com identidades diferentes. O login bem-sucedido retorna 200, a invalidação do token 401. O login bem-sucedido retorna o token no cabeçalho. através do flyio. Lembre-se que esta é a primeira vez. Depois de adicioná-lo à página de Login, você precisa adicionar um token para cada chamada de interface, o que pode ser feito no interceptor flyio.

Operações de dados do usuário

Retorne a matriz de permissão na página do aplicativo por meio de fullPath recursivo. Todas as operações de roteamento local obtêm a rota efetiva do usuário e a salvam no Vuex.

Exibição de página

No loop for da barra lateral, a rota efetiva armazenada no vuex é exibida e o componente Home é exibido para exibir o conteúdo específico da rota.

composição do projeto

estrutura

 │
├─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

módulo de projeto

Conecte-se

• O projeto é adequado para login unificado com vários sistemas back-end. Uma interface de login de entrada é um login de senha normal. O token é retornado e armazenado em Autorização.
• Em App.vue, que é o componente raiz router-view, aceite o subcomponente $emit e execute o método de login para chamar a interface para obter os dados de permissão uniformemente e concluí-los no aplicativo.

 < router-view @login =" login " @clearData =" clearData " > </ router-view > 

Função clara unificada

O código segue o propósito de uma entrada e uma saída.

• Limpe o token e atualize a página após a execução do logout do componente de cabeçalho.
• Como determinaremos se há um token no componente raiz App, não há necessidade de roteamento de saltos no logout.
• Enquanto login.vue for inicializado, clearData será executado para limpar todos os dados.

 clearData ( ) {
 if ( this . $route . path === '/login' ) {
     delete request . config . headers [ 'Authorization' ] ;
     localStorage . removeItem ( 'token' ) ;
     this . $store . dispatch ( 'CLEAR_STORE' ) ;
 }       
} 

token inválido

A resposta de interceptação global do Flyio voltará para a página de login enquanto o usuário inválido acessar a página e chamar o código de status de falha da interface e retornar 401.

 if ( err . response . status === 401 ) {
    window . location . href = '/#/login' ;
  } 

voar

• flyio é ótimo. O VPC pode ser usado em diferentes ambientes de nó de navegador e miniaplicativos móveis. Em webpack.base.conf.js, a configuração de importação é a seguinte.
• Flyio usa o módulo do pacote wx no miniprograma. Para obter detalhes, consulte o site oficial ou mpvue-netBar.

alias: {
  'vue$' : 'vue/dist/vue.esm.js' ,
  '@' : resolve ( 'src' ) ,
  'flyio' : 'flyio/dist/npm/fly'
    }
    

• Não há método jsonp no teste pessoal do flyio. Atualmente, a solução entre domínios é definir Access-Control-Allow-Origin: '*' no cabeçalho do back-end.
• Este projeto usa ajax jsonp (estamos de volta à era da escrita jquery? jquery é realmente poderoso!!)

Registro de componente

artefato webpack require.context

• Use require.context para ler os componentes no caminho especificado. Por exemplo, precisamos escrever muitos componentes de UI públicos, mas é muito problemático importá-los sempre, então use-o.
• O efeito é que o componente de exigência dinâmica automática requer três parâmetros: se o diretório de arquivo a ser pesquisado deve ser pesquisado por seus subdiretórios e uma expressão regular, e é isso.

Otimização de embalagens

• npm run build --report pode analisar o tamanho do pacote dist para destruir gradualmente o maldito arquivo
• Altere a configuração index.js productionSourceMap e cssSourceMap para false para eliminar o maldito arquivo de mapa.
• Após npm install --save-dev compression-webpack-plugin, definir productionGzip como true e ativar o modo Yasuo também reduzirá o tamanho.
• Componentes assíncronos, mas para falar a verdade, os componentes assíncronos não conseguem otimizar muito o tamanho do dist.
• cdn recursos carregados externamente webpack.base.conf.js mais recursos externos (embora eu sempre digite errado)

 externals: {
    vue : 'Vue' ,
    'element-ui' : 'ElementUI' ,
    nprogress : 'NProgress' ,
    jquery : 'window.$'
  }
  

• Em seguida, carregue o recurso cdn no índice. Lembre-se de que Vue.use não pode ser escrito no código de todos os carros externos, caso contrário, o carregamento de cdn não faz sentido porque Vue.use é o plug-in escrito por Vue e será montado no Vue. protótipo.

Implantação automática

Para obter detalhes, visite o site oficial do travis CI. Nota:

• A configuração do webpack precisa ser modificada na configuração do VPC index.js integrado para assetsPublicPath: '' em vez do diretório raiz '/' caso contrário, js será 404
• Os resultados específicos da configuração do travis-CI são diferentes. Para obter detalhes, consulte o site oficial ou siga a configuração do VPC .travis.yml.

análise técnica

Análise de uso de comunicação de componentes Vue

1.Vuex: Modo de gerenciamento de estado, gerenciamento de armazenamento centralizado do estado de todos os componentes do aplicativo e regras correspondentes para garantir que o estado mude de maneira previsível 2.EventBus: A comunicação de componentes não-pais e filhos usa centros de eventos para permitir componentes Reprodução gratuita do caso de comunicação: O que devo fazer quando, por exemplo, altero o valor de um atributo variável no componente Header neste projeto e exijo que os componentes SideBar e Home respondam à alteração? 3. Análise: Vuex, como o nome sugere, gerencia variáveis ​​globais. Aqui é o gerenciamento, não somente leitura, que é legível, mutável e detectável. Primeiro, vamos apresentar os dois atributos do ECMAScript. : atributos de dados e atributos de acesso. O primeiro: [Configurável], [[Enumerable], [Writable], [Value] Valor configurável, enumerável e substituível Geralmente o objeto literal cria o objeto var person = { name: "dave" } Ou seja, o que os atributos de dados alteram e leem é apenas o valor do objeto, e o último acessa as propriedades [Configurable]], [[Enumerable]], [[Get]], [[Set], em JavaScript usamos Object .defineProperty para definir o acesso Para obter this.person no Vue, o atributo device é chamar o método get para defini-lo, que é o método set. Vue possui sua própria árvore de dados. É por meio do atributo acessador que o monitoramento de dependência é implementado. Além do Vuex EventBus, Vue.prototype.xx e this.$root e as variáveis ​​​​do componente de operação localStorage de armazenamento local não possuem a função watch.

4. Resumo: Vue.prototype.xx, this.$root só pode ser lido e alterado. Você pode modificar e ler no protótipo Vue, mas Vue.prototype.xx pode escrever variáveis ​​​​globais para calibração e verificação por padrão. Valores etc. também operam no localStorage. Ele pode ler as configurações. Algumas pessoas dizem que você pode usar addEventListener para monitorar o armazenamento, mas você não espera fazer isso na camada Vue. O token deste projeto é usar o armazenamento local. vuex. Precisamos que as variáveis ​​sejam previsíveis e, em seguida, execute o retorno de chamada. Se você acha que está com problemas, basta usar os componentes irmãos do EventBus para se comunicar e $emit aciona o retorno de chamada $on listen.

Um cigarro depois

O foco deste projeto não está na necessidade de componentes ricos em background, mas na ideia de controle de roteamento de permissão. É apenas construir um esqueleto para resumir seu trabalho. Posteriormente, mais componentes encapsulados serão adicionados ao projeto para compor o projeto. "projeto" mais substancial e robusto.