Utilisez Vue-Router Navigation Guard pour implémenter le saut de page de connexion par jeton

Si vous ne comprenez rien, envoyez-moi un message en privé !!!

1. Introduction

Introduction aux exigences

Cette fois, il s'agit du processus de création d'une page de connexion simple pour accéder à plusieurs pages. La page de saut est également soumise à certaines conditions : 1.
Stockez le jeton à chaque fois que vous vous connectez.
2. Effacez le jeton à chaque fois que vous vous connectez et vous déconnectez
. 3. Empêcher la modification de l'URL. Le paramètre de hachage est utilisé pour accéder à la page d'accueil du backend. Le garde de navigation beforeEach est utilisé ici pour détecter s'il y a un jeton dans le stockage local. S'il y a un jeton, vous pouvez accéder à la page d'accueil du backend. Sinon, vous ne pouvez pas.

2 points de connaissances principaux

2.1 Garde de navigation

Chaque fois qu'un saut de navigation de routage se produit, la garde avant globale sera déclenchée. Il y a 3 paramètres formels
A->C
1. La fonction to est l'objet de routage C auquel on accédera
2. La fonction from est l'objet de routage A qui sera laissé
3.suivant La fonction indique la libération

   // 只要发生了路由的跳转 必然会触发beforeEach指定的function回调函数
   router.beforeEach((to,from,next)=>{
    
    
   	//需要检查是否登录的白名单
   	const pathArr=[
   	'/home',
   	'/home/yonghu',
   	'/home/quanxian',
   	'/home/shangpin',
   	'/home/dingdan',
   	'/home/xitong',
   	'/home/userinfo'
   ]
   
   	// A->C
   // to函数是将要访问的路由对象 C
   // from函数是将要离开路由对象   A
   // next函数表示放行
   // 分析
   // 1.要拿到用户将要访问的hash地址
   // 2.判断hash地址是否等于/Main
   // 2.1.如果等于/Main.证明要登录之后，才能访问成功
   // 2.2.如果不等于/Main,则不需要登录,直接放行next()
   // 3.如果访问的地址时/Main，则需要读取localStorage中的token值
   // 3.1如果有token,则放行
   // 3.2如果没有token,则强制跳转到/login登录页
   
   	// 要是多个页面都需要token检测
   	// 找to.path在不在这个pathArr数组里面,要是等于-1就是不在,不等于-1就是在
   	if(pathArr.indexOf(to.path) !== -1){
    
    
   		// 要访问后台主页,需要判断是否有token
   		const token=localStorage.getItem('token')
   		if(token){
    
    
   			next()
   		}else{
    
    
   			next('/login')
   		}
   	}else{
    
    
   		next()
   	}
   })

2.2 Jeton de paramètre de stockage

Appelez la méthode submit via l'événement click lors de la connexion

		submit(username,password){
    
    
			console.log(username);
			console.log(password);
			if(username=='123' && password=='123'){
    
    
				// 登录成功存储设置token
				localStorage.setItem('token','whl 123123')
				console.log('登录成功');
				this.$router.push('/home')
			}else{
    
    
				// 登陆失败清除toekn
				localStorage.removeItem('token')
				console.log('登录失败');
			}
		},

2.3 Effacer le jeton

	localStorage.removeItem('token')

2.4 Obtenir un jeton

	const token=localStorage.getItem('token') //获取之后,用token变量进行接收
	console.log(token)

3 autres points de connaissances importants

3.1 API de navigation programmatique

Dans un navigateur, la méthode d'appel des méthodes API pour implémenter la navigation est appelée navigation par programmation. Par exemple :
⚫ La méthode d'appel de location.href pour accéder à une nouvelle page dans une page Web ordinaire appartient à la navigation programmatique
⚫ vue-router fournit de nombreuses API de navigation programmatique, parmi lesquelles les API de navigation les plus couramment utilisées sont :

	⚫ 跳转到指定 hash 地址，并增加一条历史记录
	this.$router.push('hash地址') //这里的hash地址就是router文件夹下index.js跟组件的对应关系
	⚫ 跳转到指定的 hash 地址，并替换掉当前的历史记录
	this.$router.replace('hash地址')
	⚫ 实现导航历史前进、后退
	this.$router.go(数值 n)
	//在实际开发中，一般只会前进和后退一层页面。因此 vue-router 提供了如下两个便捷方法：
	⚫ 在历史记录中，后退到上一个页面
	this.$router.back()
	⚫ 在历史记录中，前进到下一个页面
	this.$router.forward()

3.2 Routage imbriqué

1.router-view : tant que vue-router est installé et configuré dans le projet, vous pouvez utiliser le composant vue-router (espace réservé)

	<router-view></router-view>

2.router-link : après avoir installé vue-router, vous pouvez utiliser router-link au lieu d'un lien

	<a href="#/movie">电影</a>
	<router-link to="/movie">电影</router-link>

3. Ce qu'il faut noter ici, c'est que la première vue du routeur et la deuxième vue du routeur n'ont pas de connexion. On peut comprendre que la première est dans le composant parent, la seconde est dans le composant enfant, et elles sont dans différentes pages. Appelez router-link pour utiliser router-view pour afficher différents contenus

	<router-link to="/about">tab1</router-link>  //children的path为空,叫做默认子路由,{path:'',component:Tab1}
	<router-link to="/about/tab2">tab2</router-link>
	<hr>
	<router-view></router-view>

	//src.router.index.js是当前项目的路由模块
	
	// 1.导包
	import Vue from 'vue'
	// VueRouter是构造函数，要new实例
	import VueRouter from 'vue-router'
	import Home from '@/components/Home.vue'
	import Movie from '@/components/Movie.vue'
	import About from '@/components/About.vue'
	import Tab1 from '@/components/tabs/Tab1.vue'
	import Tab2 from '@/components/tabs/Tab2.vue'
	
	
	//2.调用vue.use()给vue装插件,把VueRouter安装为vue插件
	Vue.use(VueRouter)
	
	// 3.创建路由的实例对象
	const router=new VueRouter({
    
    
		// routes是一个数组，作用定义"hash地址"与"组件"之间的关系
		routes:[
			//路由规则
			// 当用户访问 / 的时候,通过redirect跳转到/home对应的路由规则
			{
    
    path:'/',redirect:'/home'},
			{
    
    path:'/home',component:Home},
			{
    
    path:'/movie',component:Movie},
			{
    
    
				//about页面的路由规则(父级路由规则)
				path:'/about',
				component:About,
				// 通过children嵌套声明子级路由的规则
				children:[
					//默认子路由:如果children数组中,某个路由的规则的path空值
					// 为空字符串,则这条路由规则,叫做”默认子路由“
					{
    
    path:'',component:Tab1},
					{
    
    path:'tab2',component:Tab2}
				]
			},
		]
	})
	
	// 4.向外共享路由的实例对象
	export default router

3.3 Routage dynamique

Définir la partie variable de l'adresse de hachage comme élément de paramètre pour améliorer la réutilisabilité des règles

Par exemple, le projet vous permet de développer un produit et une page de détails du produit. Cliquez sur le bouton Détails pour accéder à la page de détails du produit. À l'heure actuelle, le routage dynamique est utilisé. En plus d'être simple et facile à utiliser, le plus grand rôle est d'activer les détails du produit. La page obtient des identifiants différents, de sorte que chaque page de détails du produit obtient des données de produit différentes.

	{
    
    path:'/movie/:id',component:Movie},

3.3.1 Transférer des données vers le routeur

	<a href="#" @click.prevent="xiangqing(item.id)">详情</a>
		
	xiangqing(id){
    
    
		this.$router.push('/home/userinfo/'+id)
	}	
	

3.3.2 Le routeur reçoit via:id

	const router = new VueRouter({
    
    
		// path里面的hash地址不能够是大写
		routes:[
			// redirect重定向/login，再指向component的
			// Login渲染到router-view
			{
    
    path:'/',redirect:'/login'},
			{
    
    path:'/login',component:Login},
			{
    
    	
				path:'/home',
				component:Home,
				redirect:'/home/yonghu',
				children:[
					// 要是子路由中,某个path为空值,默认子路由(默认展示)
					// children不需要添加/
					{
    
    path:'yonghu',component:MyUsers},
					{
    
    path:'quanxian',component:MyRights},
					{
    
    path:'shangpin',component:MyGoods},
					{
    
    path:'dingdan',component:MyOrders},
					{
    
    path:'xitong',component:MySettings},
					// :id主要租用就是；因为是详情,就通过id来进行区分
					{
    
    path:'userinfo/:id',component:MyUserDetail,props:true},
				]
			},
		
		]
	})

3.3.2 Obtenir l'objet paramètre $route

3.3.2.1 this.$route.params

Utilisez-le directement sous la méthode correspondante

	{
    
    {
    
    this.$route.params.id}} //1,2,3

3.3.2.2 Passage de paramètres via des accessoires

Prémisse : dans la correspondance du routeur, props : true doit être activé et le code ci-dessus a été écrit.

	props:['id'] //进行注册
	{
    
    {
    
    id}} //使用
	props:true //router对应关系中一定要开启

4 indiceDe

indexOf est utilisé dans la garde de navigation

4.1 Appel de tableau

Si la condition n'est pas remplie, -1 est renvoyé.

	let food= ["1", "2", "3", "4"];
	let a = food.indexOf("4");
	console.log(a) // 3
	let b= food.indexOf("5");
	console.log(b) // -1

4.2 Appel de chaîne

Renvoie la première occurrence d'une valeur de chaîne spécifiée dans la chaîne, en respectant la casse

	let str="Hello world!";
	console.log(str.indexOf("Hello"));//0
	console.log(str.indexOf("world"));//6
	console.log(str.indexOf("World") );//-1

5 rendus