只需2步,教你在Vue中设置登录验证拦截

Posted 华为云开发者社区

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了只需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文件中,就可以了!

至此通过前端验证登录拦截完成。

点击关注,第一时间了解华为云新鲜技术~

以上是关于只需2步,教你在Vue中设置登录验证拦截的主要内容,如果未能解决你的问题,请参考以下文章

两步教你在Vue中设置登录验证拦截!

vscode中设置vue代码片段

如何在 Vue 中设置身份验证状态更改?

在哪里放置代码以在 Vue.js 中设置 Firebase 身份验证状态持久性?

如何在 axios 拦截器中设置 http cookie?

微信一键登录—JWT生成token、登录拦截