摘要：两步教你在 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，就跳转到登录页面。
注意：
如果你是基于其他验证登录的，可以将//获取到本地的 tokenconsttoken =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 文件中，就可以了！
至此通过前端验证登录拦截完成。
点击关注，第一时间了解华为云新鲜技术~
评论