客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
|
Hello，你好呀，我是 今天在做vue和springboot交互的一个项目的时候，想要基于前端实现一些只有登录验证之后才能访问某些页面的操作，所以在这里总结一下实现该功能的一个解决方案， 首先说一下我是如何判断是否已经登录的， 一、解决思路由于在我的springboot后台采用的shiro+Jwt安全框架，所以会在登录之后反馈给前端一个 如果没有token则说明没有登录，j就跳转到登录页面。为了简化操作，我将这个验证的过程进行了封装。
二、让浏览器存储服务器返回的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文件，在其中进行封装。
代码如下：
/**
* 请求登录验证，如果没有登录，不能访问页面，返回到登录页面
*/
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()
}
})
//导入permission.js，用户进行前端的权限控制 import "./permission" 总结一下 主要的操作就是第三步和第四步，只要你在请求路由中设置了登录验证的参数，同时第四步写入了登录拦截验证，并且引入到的main.js文件中，就可以了！ 至此通过前端验证登录拦截完成。 到此这篇关于Vue中设置登录验证拦截功能的思路详解的文章就介绍到这了,更多相关vue登录验证拦截内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界！ |
请发表评论