vue 登录拦截

vue登录拦截

1、什么是登录拦截

​ 登录拦截就是在用户没有登录之前就阻止用户访问其他的页面，就只有当用户完成登录后才可以访问其他的界面。

2、路由拦截

​ vue组件化的开发就是使用vue-router进行页面跳转的，所以登录拦截需要处理一下路由，让用户在没有登录成功之前一直处于登录界面。就算用户在地址栏进行输入地址也会直接返回登录界面。

2.1定义路由（加入meta属性）

​ 我们在定义路由的时候，在meta属性中存放一个属性来判断该路由是否需要检查（如果为true，那就需要检查，在满足条件是才可以跳转到该路由）。

//例子中使用requireAuth来表示是否需要检查
//router.js 配置路由的文件
//引入路由
import Vue from 'vue';
import Router from "vue-router"
Vue.use(Router);

const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
	return originalPush.call(this, location).catch(err => err)
}

import Login from ' ' //一个路径
import Index from ' ' //一个路径

let router = new Router({
	mode: 'history',
	routes: [
        //首先写一个登录界面的路由，登录界面不需要检查，那么这里就暂时不要meta属性了
        {
			path: '/login',
			name: 'Login',
			component: Login,
		},{
			path: '/',
			name: '/',
			redirect: '/login',
			//redirect   表示当路径使用到‘/’是，就自动跳转到路径为‘/login’
		},
        //因为我们需要为index界面设置登录拦截，那么需要加上
        {
			path: '/index',
			name: 'Index',
			component: Index,
			meta: {
				requireAuth: true
			},
		},
	]
})

export default router

2.2添加登录拦截

在JavaScript中有两个属性：sessionStorage和localStorage；
sessionStorage和localStorage都是可以将数据保存下来，sessionStorage是会话存储，数据保留至关闭当前页面，刷新是不会丢失数据的；localStorage是本地存储，数据会一直保留，除非手动删除该数据。
一般来说，sessionStorage可以用于保存token（就是后台做的安全，用户需要先登录，拿到token后才能获取其他数据），而localStorage可以用于记住密码，将密码保留在本地，之后就不用再输入密码了。

用法：

sessionStorage.setItem('isLogin',true)  //这表示存储一个名为isLogin的值为true的数据
sessionStorage.getItem('isLogin')  //这表示获取存储的名为isLogin的值

localStorage.setItem('isLogin',true)  //这表示存储一个名为isLogin的值为true的数据
localStorage.getItem('isLogin')  //这表示获取存储的名为isLogin的值
//用法都比较相似

好，下面进入正题：
我们可以利用 sessionStorage 将值或者状态存入浏览器，
例如，sessionStorage.setItem(‘isLogin’,1) , 这表示向浏览器中存储一个名为isLogin的值为1的数据。
我们再来写登录拦截：

//还是在router.js中 我们这里就放在 export default router 的后面
//登录拦截
router.beforeEach((to, from, next) => {
    if (to.meta.requireAuth) {  // 判断该路由是否需要登录权限
        //如果需要就执行下面的代码
        
        var num=sessionStorage.getItem("isLogin");
        // 通过sessionStorage 获取当前的isLogin的值 将我们保存的isLogin的值赋给num,num是顺便取的名称，可以换
        //我们在登录界面，我们使用请求，请求成功后，我们就使用sessionStorage为‘isLogin’保存一个值  1，如果请求失败，就不保存‘isLogin’的值
        //如果请求成功，num的值就是1，请求失败就是null，所以下面进行判断
        if (num==1) {  
            //如果登录了，就跳转到'/index'路径
            next({path:'/index'});
        }
		else {
            next({
                path: '/login',//返回登录界面
                // query: {redirect: to.fullPath}  
            })
        }
    }
    else {
        //如果不需要登录权限就直接跳转到该路由
        next();
    }
})

3、例子

上面我们将登录拦截写好了，现在来写一个简单的例子来试一下：

//先来一个登录界面 login.vue
//这里不需要请求，所以我们来一个简单的就行了
<template>
	<div>
		<button @click="LOGIN">登录按钮</button>
	</div>
</template>

<script>
	export default {
		data() {
			return {
			
			}
		},
		methods:{
			LOGIN(){
				sessionStorage.setItem('isLogin',1);
			}
		}
	}
</script>

//再来一个主页 index.vue
//就显示一点文本就要可以了
<template>
	<div>
		登录成功，欢迎进入主页
	</div>
</template>

注意：现在可以把上面index.js中的引入组件的路径给补充完整，简单再App.vue中加上的中加上不然组件不会渲染出来，如果不懂，可以先去看看vue-router，vue-router官网地址。在试的时候，可以先在浏览器的地址栏直接在地址后面加上/index,就像http://127.0.0.1/index，因为没有登录，所以会直接返回登录界面。

4、结尾

到此登录拦截就完成了，我自认为写的比较详细，但是如果不懂可以直接问。当然，如果有什么不对的地方，请一定要指正。谢谢。