vue未登录拦截,vue拦截器不拦截登录接口
今天在做一个vue和springboot交互的项目时，想实现一些基于前端的操作，只有登录验证后才能访问，所以这里有一个实现这个功能的解决方案。
:
目录
1.解决方案2。让浏览器存储服务器3返回的令牌。在请求4中设置访问权限。封装登录验证你好，我是灰猿，一个擅长写bug的程！
今天在做vue和springboot互动的项目时，想要基于前端实现一些只有登录验证之后才能访问某些页面的操作，所以在这里总结一下实现该功能的一个解决方案，
首先，我怎么判断自己有没有登录？
一、解决思路
由于我的springboot后台采用的是shiro Jwt安全框架，登录后会反馈一个令牌给前端，前端会存储这个令牌，所以我是去查找浏览器中是否存在token，如果浏览器中存在token，则说明登录成功，可以访问相关页面；
如果没有令牌，就没有登录，J跳转到登录页面。为了简化操作，我封装了验证过程。
注意：使用这种方法进行验证的前提是你的前后端都经过shiro和token的验证，前端会存储服务器返回的token。
二、让浏览器存储服务器返回的token
我们先来看看服务器返回的令牌是如何被我保存在前端页面的。
首先我在store文件下的index.js文件中封装了一个SET_TOKEN方法，用来存储浏览器中的令牌，这样我们每次都可以通过local storage . getitem(“TOKEN”)在本地获取我们的令牌。同时，我封装了一个REMOVE_INFO方法，用于在我们注销时清除浏览器中的令牌信息。
存储文件下index.js中的代码如下：
从“vue”导入Vue
从“vuex”导入Vuex
Vue.use(Vuex)
导出默认的新Vuex。商店({
状态：{
//标记：“”，
//用户的信息可以直接从浏览器中取出
token:local storage . getitem( token )，
//反序列化操作
userInfo:JSON . parse(session storage . getitem( userInfo ))
},
突变：{
/* *类似于设置操作*/
//给token赋值
SET_TOKEN: (state，token)={
state.token=token
//将信息存储在浏览器中，这样当浏览器关闭时，信息仍然存在
localStorage.setItem(token ，token)；
},
//给userinfo赋值
SET_USERINFO: (state，userInfo)={
state.userInfo=userInfo
//每次关闭浏览器都会清除session，重新登录后会生成。
//由于sessionStorage不能存储对象，所以应该存储为字符串。
session storage . setitem( userInfo ，JSON . string ify(userInfo))；
},
//删除用户信息
REMOVE_INFO: (state)={
//删除用户信息时，将所有用户信息留空。
state . token=“”；
state . userinfo={ }；
localStorage.setItem(token ， )；
session storage . setitem( userInfo ，JSON . string ify())；
}
},
getters: {
/* *像get请求*/
//获取用户信息
getUser: state={
return state.userInfo
}
},
动作：{}，
模块：{}
})
三、在请求中设置访问权限
由于不是我们所有的页面只有登录才能访问，所以我们需要为需要登录的页面设置访问权限。
在vue中，我们通常在router下的index.js文件中设置访问路由。从010到59000，我们会通过这个属性是否为真来判断是否需要验证登录。
比如我们的BlogEdit页面只有登录才能访问，登录页面不需要登录权限，我们可以这样设置：对于需要添登录权限的请求路由，我们可以给其增加meta属性，在其中设置一个Boolean类型的属性requireAuth，
/**
*路由注册中心
*/
从“vue”导入Vue
从“vue路由器”导入vue路由器
//注册页面
导入登录名自./views/Login.vue
从导入日志./views/BlogEdit.vue
Vue.use(VueRouter)
常量路由=[
{
路径：“/login”，
名称：登录，
组件：登录
},
{
路径：“/blog/add”，
姓名： BlogAdd ，
组件：BlogEdit，
//添加权限访问，表示只有登录后才能进行该操作。
元：{
要求验证：真
}
},
]
const router=new VueRouter({
模式：“历史”，
base: process.env.BASE_URL，
路线
})
导出默认路由器
这将在您每次请求BlogEdit页面时做出判断。
四、封装登录验证
现在我们需要写一个方法来验证我们刚刚设置的属性。所以在src目录中创建一个新的permission.js文件并封装它。
想法是这样的：首先，我们拦截请求，并获取请求中的requireAuth参数。如果参数为true，我们将在浏览器中获取令牌，以验证它当前是否已登录。如果令牌存在，释放请求；如果您没有获得令牌，请跳转到登录页面。
注意：如果您基于其他身份验证登录，您可以将
//获取本地令牌
const token=ocal storage . getitem(" token ")
换成你的验证方法，但思路是一样的。
代码如下：
/**
*请求登录验证。如果您未登录，则无法访问该页面并返回登录页面。
*/
从导入路由器。/router ；
//根据路由配置文件的参数，通过路由判断登录
router.beforeEach((收件人，发件人，下一个)={
//确定路由是否需要登录权限。
//record.meta.requireAuth是请求中携带的参数。
if(to . matched . some(record=record . meta . require auth)){
//获取本地令牌
const token=local storage . getitem( token )
Console.log (show token - :token)
//判断当前令牌是否存在，即登录时的令牌。
if (token){
//如果指向登录页面，什么都不做。
if (to.path===/login){
}否则{
//如果不是登录页面，而且令牌存在，就放过。
下一个()
}
}否则{
//如果令牌不存在
//转到登录
下一步({path:/login})
}
}否则{
//如果不需要登录认证，直接访问即可
下一个()
}
})
最后，别忘了把这个页面引入mian.js
//导入permission.js，用户可以控制前端权限。
“导入”。/权限
总结
（代码有删减，但是保留了核心部分，只是删除了部分路由。）
至此，前端认证登录拦截完成。
关于在vue中设置登录验证拦截功能的详细思路本文到此为止。更多相关Vue登录验证拦截内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。