vue-router ナビゲーション ガードを使用してトークン ログイン ページ ジャンプを実装する

何かわからないことがあれば、個別にメッセージを送ってください!!!

1 はじめに

要件の紹介

今回は、複数のページにジャンプする簡易ログインページを実現する手順ですが、ジャンプページには、 1.
ログインするたびにトークンを保存する
2. ログインとログアウトするたびにトークンをクリアする という条件もあります
。 3. URL の変更を防止します。ハッシュ パラメーターは、バックエンド ホームページにアクセスするために使用されます。ナビゲーション ガード beforeEach は、ローカル ストレージにトークンがあるかどうかを検出するために使用されます。トークンがあれば、バックエンド ホームページにアクセスできます。 . そうでない場合はできません。

2つの主要な知識ポイント

2.1 ナビゲーションガード

ルーティング ナビゲーション ジャンプが発生するたびに、グローバル プレガードがトリガーされます。仮パラメータは 3 つあります
A->C
1. to 関数は、アクセスされるルーティング オブジェクト C です。
2. from 関数は、ルーティング オブジェクト A です。 3.次へ
リリースを示す機能

   // 只要发生了路由的跳转 必然会触发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 ストレージ設定トークン

ログイン時にクリックイベントを通じて submit メソッドを呼び出します。

		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 クリアトークン

	localStorage.removeItem('token')

2.4 トークンの取得

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

その他の 3 つの重要な知識ポイント

3.1 プログラムによるナビゲーション API

ブラウザーでは、API メソッドを呼び出してナビゲーションを実装する方法をプログラム ナビゲーションと呼びます。例:
⚫ 通常の Web ページで新しいページにジャンプするために location.href を呼び出すメソッドは、プログラム ナビゲーションに属します。
⚫ vue-router は、多くのプログラム ナビゲーション API を提供します。その中で、最も一般的に使用されるナビゲーション API は次のとおりです。

	⚫ 跳转到指定 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 ネストされたルーティング

1.router-view: vue-router がプロジェクトにインストールされ構成されている限り、vue-router コンポーネント (プレースホルダー) を使用できます。

	<router-view></router-view>

2.router-link: vue-router をインストールした後、リンクの代わりに router-link を使用できます。

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

3. ここで注意すべきは、最初のルータービューと 2 番目のルータービューには関係がないということであり、最初のルータービューは親コンポーネントにあり、2 番目のルータービューは子コンポーネントにあり、それらは接続されていることがわかります。 router-link を呼び出して、router-view を使用して別のコンテンツを表示します。

	<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 動的ルーティング

ハッシュアドレスの可変部分をパラメータ項目として定義し、ルールの再利用性を向上

たとえば、このプロジェクトでは、製品と製品の詳細ページを開発できます。詳細ボタンをクリックすると、製品の詳細ページにジャンプします。このとき、ダイナミック ルーティングが使用されます。シンプルで使いやすいことに加えて、より大きな役割を果たします。ページが異なる ID を取得するため、各商品詳細ページは異なる商品データを取得します。

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

3.3.1 ルーターへのデータ転送

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

3.3.2 ルーターは次の経由で受信します: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 $routeパラメータオブジェクトの取得

3.3.2.1 this.$route.params

対応するメソッドの直下で使用します

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

3.3.2.2 小道具を介してパラメータを渡す

前提：ルーター対応でprops:trueをonにして上記のコードを書いている必要があります。

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

4 インデックスの

IndexOf はナビゲーション ガードで使用されます

4.1 配列呼び出し

条件が満たされない場合は、-1 が返されます。

	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 文字列呼び出し

大文字と小文字を区別して、文字列内で最初に出現した指定された文字列値を返します。

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

5 つのレンダリング