le titre de l'article
1. Vue implémente l'interception de connexion
1-1. Affichage des effets
Le compte avec mot de passe n'a pas été ajouté avec une authentification forte, la barre d'adresse ne peut pas accéder directement à la page en modifiant le chemin et doit être connecté avec succès
1-2 Affichage des codes
Routeur 1-2-1.js
import Vue from "vue"
import VueRouter from "vue-router"
Vue.use(VueRouter)
const router = new VueRouter({
mode: "history",
base: "/",
routes: [
{
path: "/login",
name: "login",
component: () => import("./pages/login.vue")
},
{
path: "/",
name: "index",
component: () => import("./pages/index.vue")
}
]
})
export default router
1-2-2 sous le dossier du magasin
1-2-2-1 état.js
état ---- entrepôt de données
- state est un json relativement puissant, utilisé pour stocker des données
export default {
userInfo: "",
}
1-2-2-2 index.js
import Vue from "vue"
import Vuex from "vuex"
import state from "./state"
import mutations from "./mutations"
import getters from "./getters"
import actions from "./actions"
Vue.use(Vuex)
const store = new Vuex.Store({
state,
getters,
actions,
mutations
})
export default store
1-2-2-3 mutation.js
mutation ---- utilisée pour modifier les données
- Pourquoi l'état ne peut-il pas être instancié directement, puis modifier directement les données de l'état
- Commettre une mutation, puis faire passer l'état par la mutation puis modifier l'état
- Synchrone
export default {
login(state, v) {
state.userTnfo = v
}
}
1-2-3 main.js【La clé de l'interception de connexion—Global Routing Guard】
1. Présentez le magasin
import store from "./store";
2. Le contrôle ne peut pas accéder aux autres pages avant de se connecter
router.beforeEach((to,from, next) => {
if(store.state.userInfo || to.path === "/login"){
next()
} else {
next({
path: "/login"
})
}
)
login.vue sous 1-2-4 pages
<template>
<div class="login">
<p class="login-title">
登陆权限
</p>
<div class="section">
<input
class="section-input"
v-model="form.account"
placeholder-class="input-holder"
placeholder="请输入您的账号"
/>
</div>
<div class="section">
<input
class="section-input"
type="password"
v-model="form.password"
placeholder-class="input-holder"
placeholder="请输入您的密码"
/>
</div>
<button class="btn" @click="login">登录</button>
</div>
</template>
<script>
import store from "../store";
export default {
data() {
return {
isHidden: false,
isPassword: true,
logs: [],
form: {
account: "",
password: ""
}
};
},
created() {
},
mounted() {
},
methods: {
login() {
if (!this.form.account || !this.form.password) {
alert("请填写账号密码");
return false;
}
const that = this;
setTimeout(() => {
store.commit("login", {
account: that.form.account,
password: that.form.password
});
that.$router.push("./");
}, 500);
}
}
};
</script>
<style lang="less">
.login {
position: relative;
top: 0;
left: 0;
padding: 0 45px;
p {
text-align: center;
}
&-title {
color: #111111;
font-size: 36px;
padding: 40px 0 30px;
}
.section {
&-input {
width: 100%;
height: auto;
border: none;
margin-bottom: 30px;
outline: none;
font-size: 16px;
line-height: 1.6;
border-bottom: 1px solid red;
}
.input-holder {
color: #777777;
font-size: 16px;
}
}
.btn {
width: 100%;
height: auto;
color: #fff;
background: #373737;
margin: 10px 0 20px;
padding: 15px;
box-sizing: border-box;
border-radius: 5px;
font-size: 16px;
}
.btn-primary {
color: #373737;
background: #fff;
}
.login-text {
position: fixed;
left: 0;
bottom: 60px;
width: 100%;
height: auto;
font-size: 12px;
color: #777777;
text-align: center;
}
}
</style>
1-3 Résumé
- Créez un dossier de magasin et initialisez-le
- Obtenez cette instance dans la garde de navigation globale créée dans main.js.
$store.state.userInfoProtéger la navigation par le jugementnext()- ou
next({path: '/login'})
- Dans le composant de connexion en
store.commitsoumettant les données userInfo
2. Introduction aux fonctions du projet Vue
Adresse du projet : placé sur github, cliquez ici
2-1 Fonction
-
Configurez les gardes de routage globaux dans main.js pour contrôler les autorisations de routage de connexion des utilisateurs
- Lorsqu'il n'y a pas de connexion, l'itinéraire ne peut pas sauter
-
Partage
$state.userStatuset$state.vipLevelvaleur d'état de l'interface Index et UserCenter -
Rechargez différents montants, devenez
$state.vipLevelmembre du niveau et regardez les cours correspondants
2-2 Afficher les éléments
3. Connexion de routage React et authentification de l'identité de l'utilisateur
3-1 Brève introduction du projet
Affichage 3-1-1
- Rendus :
3-1-2 Structure du code + affichage des idées
3-1-2-1 Répertoire du projet :
-
Dépendances d'installation :
yarn add react-router-dom -
Ajouter le routage à React
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import MainRouter from "./page/router";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<MainRouter />);
=============================================================================
import {
HashRouter, Redirect, Route, Switch } from "react-router-dom";
import routerConfig from "./config";
import {
getToken } from "../../utils/token";
const PrivateRoute = (props) => {
const {
routerConfig, location } = props;
const {
pathname } = location;
const isLogin = JSON.parse(getToken()); // 判断是否登录
const currentRoute = routerConfig.find((item) => item.path === pathname); // 找到路由对应的组件
/* 这些if eles 部分可以省略，只是为了直观一点 */
if (isLogin) {
/* 已经登录，再次进登录页面，就让它跳转到首页 */
if (pathname === "/login") {
return <Redirect to={
"/"} />;
} else {
if (currentRoute) {
/* 登录成功后，访问非登录页面，路由匹配的上 */
if (currentRoute.super && isLogin.level <= 0) {
// 权限不够
return <Redirect to={
"/noPermission"} />;
}
return <Route path={
pathname} component={
currentRoute.component} />;
} else {
/* 路由匹配不上 */
return <Redirect to={
"/404"} />;
}
}
} else {
/* 非登录状态 */
if (currentRoute) {
if (currentRoute.auth) {
/* 可以匹配到路由，但是访问这个页面需要登录 */
return <Redirect to={
"/login"} />;
} else {
/* 可以匹配到路由， 但是不需要登录， 就可以直接访问了 */
return <Route path={
pathname} component={
currentRoute.component} />;
}
} else {
/* 匹配不到路由， 直接跳转到404 */
return <Redirect to={
"/404"} />;
}
}
};
3-1-2-2 Logique de connexion
import React from "react";
import {
setToken } from "../../utils/token";
function LoginComponent(props) {
const {
history } = props;
return (
<div>
<h1>Login Page</h1>
<button
onClick={
() => {
const LoginInfo = {
value: "chenjiang",
level: 0, // 标志普通管理员
};
setToken(JSON.stringify(LoginInfo));
history.push("/");
}}
>
管理员登录
</button>
<button
onClick={
() => {
const LoginInfo = {
value: "chenjiang",
level: 1, // 标志超级管理员
};
setToken(JSON.stringify(LoginInfo));
history.push("/");
}}
>
超级管理员登录
</button>
</div>
);
}
export default LoginComponent;
4. Forkez et lancez le projet sur github
Visualisez les cas plus facilement et comprenez plus clairement !
Ouvrez le code source et cliquez sur Fork
- lancer ce projet
- Fork dans GitHub est un clone d'entrepôt de code côté serveur (c'est-à-dire que l'entrepôt de code nouvellement cloné se trouve côté serveur distant), qui contient tout le contenu de l'entrepôt d'origine (c'est-à-dire le référentiel en amont, l'entrepôt en amont), comme les branches , les balises et les soumissions.
- Les services d'hébergement de code (tels que Github, BitBucket) fournissent une fonction pratique pour terminer l'opération Fork (cliquez sur le bouton Fork sur la page de l'entrepôt). De cette façon, vous disposez d'un entrepôt distant que vous pouvez soumettre librement, puis vous pouvez contribuer votre soumission à l'entrepôt d'origine via la Pull Request.
- Quant au propriétaire de l'entrepôt d'origine, encourager les autres à créer son entrepôt et à contribuer à son entrepôt via Pull Request améliore également la popularité de l'entrepôt d'origine.
- Copiez l'adresse de votre entrepôt
4-2 Installation d'un entrepôt local
- Créez un nouveau dossier localement
logInToIntercept, cmd entre dans la ligne de commande - Initialisez le référentiel :
git init - Extrayez le code source du projet depuis l'entrepôt distant :
git pull 上文复制的仓库地址
4-3 Projet en cours d'exécution local [avec environnement de nœud]
1. Le package d'installation dépend de : yarn add
2. Exécutez le projet selon la configuration spécifique du package : yarn run serveou yarn start
3. Ouvrez-le simplement dans le navigateur : http://localhost:3000
Question sur git : erreur : src refspec main ne correspond à aucun