只需2步,教你在Vue中设置登录验证拦截
摘要:两步教你在Vue中设置登录验证拦截!
本文分享自华为云社区《两步教你在Vue中设置登录验证拦截!》,作者: 灰小猿 。
今天在做vue和springboot交互的一个项目的时候,想要基于前端实现一些只有登录验证之后才能访问某些页面的操作,所以在这里总结一下实现该功能的一个解决方案。
首先说一下我是如何判断是否已经登录的,
一、解决思路
由于在我的springboot后台采用的shiro+Jwt安全框架,所以会在登录之后反馈给前端一个token,并且前端会将该token进行存储,所以我是去查找浏览器中是否存在token,如果浏览器中存在token,则说明登录成功,可以访问相关页面;
如果没有token则说明没有登录,j就跳转到登录页面。为了简化操作,我将这个验证的过程进行了封装。
注意:使用这种方法进行验证的前提是你的前后端是通过shiro和token进行验证的,并且前端会存储服务器返回的token。
二、让浏览器存储服务器返回的token
首先来看一下服务器端返回的token是如何被我在前端页面中存储的。
首先我在store文件下的index.js文件中封装了一个SET_TOKEN方法,用来将token存储到浏览器,这样我们每次就都可以通过localStorage.getItem(“token”),来从本地拿到我们的token,同时封装了一个REMOVE_INFO方法,在当我们退出登录的时候,清空浏览器中的token信息。
store文件下的index.js中代码如下:
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { // token: "", //用户的信息可以直接从浏览器中取出来 token: localStorage.getItem("token"), //反序列化操作 userInfo: JSON.parse(sessionStorage.getItem("userInfo")) }, mutations: { /**类似set操作*/ //给token赋值 SET_TOKEN: (state, token) => { state.token = token; //将信息存储到浏览器中,以至于浏览器关闭时信息还在 localStorage.setItem("token", token); }, //给userinfo赋值 SET_USERINFO: (state, userInfo) => { state.userInfo = userInfo; //session会在每次浏览器关闭时清空,在重新登录后再生成 //由于sessionStorage不能存储对象,所以要将其存储成字符串的形式 sessionStorage.setItem("userInfo", JSON.stringify(userInfo)); }, //移除用户信息 REMOVE_INFO: (state) => { //移除用户信息时将用户所有的信息都置为空 state.token = ""; state.userInfo = {}; localStorage.setItem("token", ""); sessionStorage.setItem("userInfo", JSON.stringify("")); } }, getters: { /**类似get请求*/ //获取用户信息 getUser: state => { return state.userInfo; } }, actions: {}, modules: {} })
三、在请求中设置访问权限
由于我们并不是所有的页面都只要在登录的时候才能访问,所以我们要对需要进行登录才能访问的页面设置访问权限,
在vue中我们一般将访问路由设置在router下的index.js文件中,对于需要添登录权限的请求路由,我们可以给其增加meta属性,在其中设置一个Boolean类型的属性requireAuth, 我们会以该属性是否为true来判断是否需要验证登录。
比如我们的BlogEdit页面只有在登录的时候才能访问,Login页面不需要登权限,那么我们就可以这样设置:(代码有删减,但是保留了核心部分,只是删除了部分路由。)
/** * 路由注册中心 */ import Vue from 'vue' import VueRouter from 'vue-router' //注册页面 import Login from '../views/Login.vue' import BlogEdit from '../views/BlogEdit.vue' Vue.use(VueRouter) const routes = [ { path: '/login', name: 'Login', component: Login }, { path: '/blog/add', name: 'BlogAdd', component: BlogEdit, //添加权限访问,表示只有登录之后才能进行该操作 meta: { requireAuth: true } }, ] const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }) export default router
这样在每次请求BlogEdit页面的时候都会进行判断。
四、封装登录验证
现在我们需要写一个方法来对我们刚才设置的属性进行验证。所以在src目录下新建一个permission.js文件,在其中进行封装。
思路是这样的: 首先我们拦截该请求,获取到该请求中的requireAuth参数,如果参数是true,那么就去获取浏览器中的token,验证当前是否是登录状态。如果存在token,就放行请求;如果没有获取到token,就跳转到登录页面。
注意:如果你是基于其他验证登录的,可以将//获取到本地的token
const token =ocalStorage.getItem(“token”)
换成你的验证方式,但是思路都是一样的。
代码如下:
/** * 请求登录验证,如果没有登录,不能访问页面,返回到登录页面 */ import router from "./router"; //路由判断登录,根据路由配置文件的参数 router.beforeEach((to,from,next)=>{ //判断该路由是否需要登录权限 //record.meta.requireAuth是获取到该请求中携带的该参数 if (to.matched.some(record => record.meta.requireAuth)){ //获取到本地的token const token = localStorage.getItem("token") console.log("显示token----------:" + token) //判断当前的token是否存在,也就是登录时的token if (token){ //如果指向的是登录页面,不做任何操作 if (to.path === "/login"){ }else { //如果不是登录页面,且token存在,就放行 next() } }else { // 如果token不存在 // 前往登录 next({path:'/login'}) } }else { //如果不需要登录认证,就直接访问 next() } })
最后别忘了将该页面引入到mian.js中。
//导入permission.js,用户进行前端的权限控制 import "./permission"
总结一下
主要的操作就是第三步和第四步,只要你在请求路由中设置了登录验证的参数,同时第四步写入了登录拦截验证,并且引入到的main.js文件中,就可以了!
至此通过前端验证登录拦截完成。
相关文章
- 租房“免押金”大面积落地,年底租房人群迎来一点甜
- 简单描述 MySQL 中,索引,主键,唯一索引,联合索引 的区别,对数据库的性能有什么影响(从读写两方面)
- 面试官问:Stream 中的 map、peek、foreach 方法的区别?彻底懵了。。
- 广电5G:“农村包围城市”还是内容创新为王?
- 华为、苹果竞争未完,平板赛道再成舞台
- 月销10万+!长城汽车全面发力“森林式生态体系”结硕果
- 鲲鹏生态下,长沙“计算”产业再登新高度
- 盘点四大运营商的5G套餐亮点,国庆出游上车5G不用愁!
- 帮您总结了面试中常用的PHP函数,您不进来看看吗?
- 面试过程中Mysql数据库常被问到的问题详解
- 面向对象是面试时提问最多的吗?
- 几道很有代表性的PHP面试题,研究研究有助于面试加分
- 【404】你访问的页面需要关灯后查看!
- 摸鱼搞了个掘金数据监控桌面应用,还不快用起来!
- 这个实现不对,要的是excel里面的高亮重复项效果
- 精选Github计算机开源视觉项目
- 腾讯云大数据流计算 Oceanus 在 MySQL CDC Connector 的核心优化
- 网宿科技携手亚马逊云科技,助力云计算成为真正的生产力
- 【FAQ】分析服务导出的事件数据和概览页面展示的数据不一致该如何解决?
- 金融App面临安全风险?解锁HMS Core安全检测服务解决方案