SpringBoot + Vue séparant les extrémités avant et arrière, en utilisant question des droits de processus parfait SpringSecurity

Lorsque la séparation backend actuelle, le traitement de questions relatives aux droits et notre approche traditionnelle un peu différent. Quelques jours je viens responsable d'un projet de module de gestion des droits, le module de gestion des droits a été fait, je pense par 5-6 articles pour présenter le projet a rencontré des problèmes et des solutions, je l'espère cette série partenaire junior à l'aide. Cette série d'articles est pas une pratique sur des tutoriels, introduit l'idée de base et a expliqué le code de base, le code complet peut être de petits partenaires sur l'étoile dans le clone GitHub vers le bas et l'étude. En outre, le projet initialement prévu de lancer en ligne pour les petits partenaires à vue, mais avant d'économiser de l'argent pour acheter un serveur, la mémoire est seulement 512M, deux applications ne fonctionnent pas vers le haut (a déjà une V tribu projet open source en cours d'exécution), si petit partenaire nous ne regarderons la capture d'écran ci-dessous, la fin de l'article il y a le déploiement des didacticiels, le déploiement à la boîte locale aussi voir le plein effet.

Dans cet article, nous ne parlons pas de réalisation concrète, permettez-moi de présenter toute une architecture de mon module de gestion des droits, et la présentation des résultats finaux.

Conception de base de données

La principale base de données de l'autorité contient cinq tables sont des tables de ressources, table rôle, table utilisateur, les rôles des ressources de table, tables de rôles utilisateur, bases de données, modèle relationnel comme suit:

Sur ce tableau, je l'ai dit ce qui suit:

table 1.hr est une table utilisateur, pour stocker des informations de base de l'utilisateur.

2.Rôle est une table de rôle, champ de nom représente le rôle du nom anglais, conformément aux normes de SpringSecurity, commencera ROLE_, champ nameZh représente le rôle du nom chinois.

table de ressources 3.menu est une table, le champ de la table un peu plus impliqué, parce que je fais la fin de l'avant de la Vue, alors quand l'utilisateur se connecte à succès, le système des modules chargés dynamiquement nécessaires en fonction du rôle de l'utilisateur, tous les modules les informations de champ de menu stockée dans la table, le chemin d'accès de table, composants, iconCls, keepAlive, requireAuth Vue-routeur ainsi que d'autres champs sont nécessaires, qui sont les données de menu lorsque le formulaire est renvoyé à l'extrémité avant json , puis la mise à jour dynamique routeur de vue, le menu dispose également d'une URL de champ, représente un schéma de l'URL, à savoir la règle d'adaptation de trajet, en supposant une règle de correspondance pour le chemin / admin / **, lorsqu'un utilisateur lance un client / admin / la demande de l'utilisateur, est / admin / ** intercepté, le système afficher à nouveau le rôle qui correspond à cette règle, puis de voir si l'utilisateur a le caractère approprié, puis déterminer si la demande est légale.

La figure ci-dessous font partie des données de la table utilisateur, rôle de la table et les tables ressources (scripts de base de données peuvent être téléchargés à l'adresse de projet à la fin du texte, l'emplacement des ressources / vhr.sql):

L'effet global

Tout d'abord, les différents utilisateurs après une connexion réussie, selon le rôle, vous verrez un menu système différent, menu complet comme suit:

Une fois que les utilisateur se connecte à différents, vous pouvez le voir, il y aura des différences, comme suit:

Chaque rôle d'utilisateur est attribué par l'administrateur système, administrateur système à la page Assigner des rôles à l'utilisateur comme suit:

Les administrateurs système peuvent également gérer les ressources des différents rôles qui peuvent fonctionner, la page est suit comme:

Autre suppression, de recherche et d'autres fonctionnalités que je n'est ici plus triviales Introduit un par un.

adresse projet

Depuis l'accord commercial, le projet initial ne peut être partagé pour vous donner un petit partenaire, donc j'ai fait un projet open source spéciale, l'ensemble du projet plus de fonctionnalités, mais compte tenu de cette série d'articles est principalement d'introduire le module de gestion des droits, donc d'autres modules sont en cours de me castrer, mais les petits partenaires peuvent être assurés que le module de gestion des droits de ligne de code ne sont pas supprimés, liés au code de gestion des droits et des données est terminée, vous pouvez exécuter directement. Après administrateur partenaire junior se connectera au système back-end, la connexion est réussie, puis cliquez sur Administration système - > Réglage des informations de base - > groupe de droits, vous pouvez configurer les ressources qui peuvent fonctionner dans différents rôles, puis cliquez sur Gestion de système - > la gestion de l'opérateur, pour gérer le rôle de chaque opérateur.

Adresse du projet: https://github.com/lenve/vhr

déploiement rapide

projet 1.clone à la git@github.com locale: lenve / vhr.git

2. Le script de base de données dans le répertoire des ressources des projets en cours d'exécution HRServeur dans les scripts de base de données MySQL

3. Configuration de base de données dans les ressources du projet répertoire HRServeur le fichier application.properties

4. Exécutez le projet IntelliJ IDEA en HRServeur

OK, maintenant, le serveur a démarré avec succès, et cette fois nous sommes entrés directement dans la barre d'adresse http: // localhost: 8082 / index.html pour accéder à notre projet, si pour faire du développement secondaire, s'il vous plaît lire le cinquième, six étapes.

5. vuehr dans le répertoire, entrez la séquence de ligne de commande suivante:

# Installe les dépendances

NPM installer

# Dans localhost: 8080 pour démarrer le projet

NPM run dev

Depuis que je vuehr projet a été configuré la redirection de port, la transmission des données à la SpringBoot, donc après le début du projet, entrez dans votre navigateur à l'adresse http: // localhost: 8080 pour accéder à l'avant de notre projet, et toutes les demandes via le port transmettant les données transmises SpringBoot (notez que le moment ne ferment projet SpringBoot).

6. Enfin WebStorm peut être ouvert avec des outils tels que le projet de vuehr, continuent à se développer, après le développement est terminé, lorsque le projet d'être en ligne, toujours vuehr dans le répertoire, puis exécutez la commande suivante:

NPM build run

Une fois la commande est exécutée avec succès, la génération de catalogue vuehr dist un dossier, le dossier deux fichiers sont copiés sur le projet statique et index.html SpringBoot ressources / statique / répertoire, puis peut être directement étape 4 visité.

Étape 5 doit avoir une certaine expérience de NodeJS, NPM et d'autres petits partenaires ne connaissent pas voudront rechercher dans leur propre apprentissage, recommandation Vue tutoriel officiel.

Pékin goût de l'automne
Précédent
sentiments vieilles consoles vent soufflant, mais comment peut-il tant de gens vont payer
Prochain
A éviter d'atteindre ces temps de demain avec vous « jouer jusqu'à »
Sanming réforme des soins de santé où une expérience spontanée
S'il vous plaît, ne me demande pas interviewer le genre radix
Oracle Arena en saison régulière bataille finale! capitaines guerriers sont arrivés au stade
poison Facebook dans le code, Baidu sérieusement blessé
pied de disque Wuchang d'une scène de récolte
Pourquoi Kafka si vite, nettement en avance sur les autres mq
ZDNet: iOS 11 déjà désespérément BGR: Non-sens!
Froid "geler" it real! S'il vous plaît répondre à ma Qiuku juin
Votre peau vraiment! Lillard avant du vélo dans l'arène de la maison
état de synchronisation QQ ce qui est de pousser ou tirer?
Juste NDRC monnaie virtuelle « minière » hors de la classe comme l'industrie, la chaîne industrielle pour être cool?