vue 实现axios拦截、页面跳转和token 验证

野性酷女 2023-09-25 12:11 66阅读 0赞

第一步: 路由 多添加一个自定义字段 requireAuth

path: '/repository',

name: 'repository',

meta: \{

requireAuth: true, // 添加该字段，表示进入这个路由是需要登录的

\},

component: Repository

第二步:

router.beforeEach((to, from, next)=> \{

if (to.meta.requireAuth) \{ // 判断该路由是否需要登录权限

if (store.state.token) \{ // 通过vuex state获取当前的token是否存在

next();

\}

else \{

next(\{

path: '/login',

query: \{redirect: to.fullPath\} // 将跳转的路由path作为参数，登录成功后跳转到该路由

\})

\}

\}

else \{

next();

\}

登录拦截到这里就结束了吗？并没有。

这种方式只是简单的前端路由控制，并不能真正阻止用户访问需要登录权限的路由。(可手动在浏览器地址栏输入没有权限的路由)

还有一种情况便是：当前token失效了，但是token依然保存在本地。

这时候你去访问需要登录权限的路由时，实际上应该让用户重新登录。

这时候就需要结合 http 拦截器 + 后端接口返回的http 状态码来判断。

第三步: 拦截器 (要想统一处理所有http请求和响应，就得用上 axios 的拦截器。)

每次跳页面, 都要获取新路由对应的html页面, 这时候可以用axios的http拦截

每次路由跳转, 都先让后台验证一下token是否有效, 在http头添加token,

当后端接口返回 401 Unauthorized(未授权) ，让用户重新登录。

关于Autorization 使用之后会忽略cookie的token, 削弱了安全性, 可以配合https

// http request 拦截器

axios.interceptors.request.use(

config=> \{

if (store.state.token) \{ // 判断是否存在token，如果存在的话，则每个http header都加上token

config.headers.Authorization=\`token $\{store.state.token\}\`;

\}

return config;

\},

err=> \{

return Promise.reject(err);

\});

// http response 拦截器

axios.interceptors.response.use(

response=> \{

return response;

\},

error=> \{

if (error.response) \{

switch (error.response.status) \{

case 401: 401 旌旗 灵医 , 只用\[授权\] 旌旗的医生 才是 灵医

// 返回 401 清除token信息并跳转到登录页面

store.commit(types.LOGOUT);

router.replace(\{

path: 'login',

query: \{redirect: router.currentRoute.fullPath\}

\})

\}

\}

return Promise.reject(error.response.data) // 返回接口返回的错误信息

\});

完整的方法见 /src/http.js .

通过上面这几步，就可以在前端实现登录拦截了。

登出 功能也就很简单，只需要把当前token清除，再跳转到首页即可。

github

后台直接跳转方法:

这种方法只要没有登录 或者登录超时,

访问任何页面都会跳转到登录页面,

把不需要验证的页面也给拦截了

在index.html 加载一个 config.jsp

//加载

document.write("

发表评论取消回复

表情：

评论列表（有 0 条评论，66人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue 实现axios拦截、页面跳转和token 验证

　　第一步: 路由多添加一个自定义字段 requireAuth 　　path: '/repository', 　　name: 'repository', 　　meta:

野性酷女/ 2023年09月25日 12:11/ 0 赞/ 67 阅读

相关 axios拦截请求跳转

　　官方文档：http://www.axios-js.com/zh-cn/docs/\%E6%8B%A6%E6%88%AA%E5%99%A8 　　拦截器定义好后的请求数据方法

系统管理员/ 2023年09月25日 12:10/ 0 赞/ 133 阅读

相关 vue 页面跳转

1.href//跳转刷新页面 @click = jumpCompanyProfile(item.picktextUrl)//参数是后台给的接口 jump

一时失言乱红尘/ 2023年08月17日 15:40/ 0 赞/ 160 阅读

相关 Vue实现页面跳转

![70][]![70 1][] 如何点击底部书架跳转到对应的页面 <router-link :to="{name: 'bookshelf', params: {

àì夳堔傛蜴生んèń/ 2022年05月22日 06:12/ 0 赞/ 376 阅读

相关 Vue 页面跳转

1.单页面跳转 1.1 无参数-- this.$router.push(path: ' 路由 ') 传递参数 -- this.$router.pus

Bertha 。/ 2022年03月26日 05:05/ 0 赞/ 334 阅读

相关 vue登录拦截登录后继续跳转指定页面

> 小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大

柔情只为你懂/ 2022年02月17日 07:28/ 0 赞/ 323 阅读

相关 vue 页面跳转

1.使用 `<router-link>` 创建 a 标签 <router-link to="/city"> <div>跳转</div> </

你的名字/ 2021年12月12日 13:57/ 0 赞/ 412 阅读

相关 vue实现页面跳转的方式

vue实现页面跳转的方式 1、使用路由：router-link 2、使用编程式导航：this. r o u t e r . p u s h ( " / " ) 3 、

深碍√TFBOYSˉ_/ 2021年10月12日 17:54/ 0 赞/ 442 阅读

相关 Springboot实现filter拦截token验证和跨域

转载：https://blog.csdn.net/zjcjava/article/details/78237164 背景 web验证授权合法的一般分为下面几种

﹏ヽ暗。殇╰゛Y/ 2021年09月17日 03:54/ 0 赞/ 238 阅读

相关 Vue - 通过axios拦截器添加token验证

在main.js中配置axios: ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0c

我就是我/ 2021年07月25日 13:49/ 0 赞/ 452 阅读