使用vue-router导航守卫来实现token登录页面跳转

有什么不懂的可以私信我!!!

1 介绍

需求介绍

本次是实现一个简单的登录页面跳转到多个页面的过程，跳转页面也附带了一些条件
1.每次登录要进行存储token
2.每次登录退出进行清除token
3.阻止修改url上hash参数进行访问后台主页，这里用到的是导航守卫beforeEach进行检测本地存储中是否有token，要是有token就能访问后台主页，没有就不能

2 主要知识点

2.1 导航守卫

每次发生路由的导航跳转时，都会触发全局前置守卫,有 3 个形参
A->C
1.to函数是将要访问的路由对象 C
2.from函数是将要离开路由对象 A
3.next函数表示放行

   // 只要发生了路由的跳转 必然会触发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 存储设置token

在登录的时候通过点击事件调用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 清除token

	localStorage.removeItem('token')

2.4 获取token

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

3 其他重要知识点

3.1 编程式导航API

在浏览器中，调用 API 方法实现导航的方式，叫做编程式导航。例如：
⚫ 普通网页中调用 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链接

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

3.这里要注意的是第一个router-view和第二个router-view没有任何关联，可以这么理解第一个是在父组件中，第二个在子组件中，在不同的页面中各自调用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 动态路由

把hash地址中可变的部分定义为参数项，从而提高由规则的复用性

比如项目中让你开发一个商品和商品详情页面,点击详情按钮,就能跳转到商品详情页面,这时候就用到了动态路由,除了简单易用之外,更大的作用就是能够让商品详情页面获取到不一样的id,从而每个商品详情页面获取到不一样的商品数据。

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

3.3.1 传数据给router

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

3.3.2 router通过: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传参

前提:在router对应关系中,一定要开启 props:true上上方的代码已经写上

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

4 indexOf

在导航守卫中用到了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 效果图