Vue中设置登录验证拦截

最新推荐文章于 2024-08-09 10:36:23 发布

nI是我致命的伤囍

最新推荐文章于 2024-08-09 10:36:23 发布

阅读量1k

点赞数

文章标签： javascript vue

原创

本文链接：https://blog.csdn.net/bly802337/article/details/127305243

版权

本文介绍了在Vue项目中设置登录验证拦截的实现过程，包括存储服务器返回的JWT token，为需要登录权限的路由添加meta属性，以及封装登录验证方法。在权限验证中，当检测到requireAuth为true时，检查浏览器中是否存在token，存在则允许访问，否则重定向到登录页面。

摘要由CSDN通过智能技术生成

Vue中设置登录验证拦截

**
一、解决思路
由于在我的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 =