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中有两个属性:sessionStoragelocalStorage
sessionStoragelocalStorage都是可以将数据保存下来,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、结尾

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

Logo

前往低代码交流专区

更多推荐