vue登录以及权限验证相关的实现


Posted in Javascript onOctober 25, 2019
关键词:前后端分离、jwt、登录、权限验证

最近在做一个小应用,需要用到vue实现登录,以及给不同路由设置权限。在网上看了很多文章,讲的是乱七八糟。感叹国内技术类文章实在是差劲,抄来抄去。这篇文章就说说我最后是如何实现的。

前后端分离项目中,后端提供api接口给前端,使用jwt发放权限。

首先前端提供用户名和密码请求登录接口,后端验证之后返回给前端一个token,之后前端在请求需要权限的接口时携带这个token就可以了。

两个问题

现在面临两个问题,

首先vue中不同的路由有不同的权限,比如我要访问后台 /admin, 就需要先登录才行,而有的页面不需要登录。

第二个问题是,vue组件中使用axios请求后台服务时,不同的接口有不同的权限。

vue登录以及权限验证相关的实现

后端接口权限

先来解决第二个问题。vue不同组件都要用到axios,我们在全局为axios添加request和response的拦截器。

也就是,在发起请求之前,先检测header是否携带token信息。在接收响应之前,先查看后端返回状态码,如果说需要token验证就跳转到登录界面。

在main.js添加如下,或者新增一个http.js文件:

// * http request 拦截器
axios.interceptors.request.use(
  config => {
    // * 判断是否存在token,如果存在的话,则每个http header都加上token
    // * token会在登录之后存储在本地
    if (localStorage.token) {
      config.headers["Authorization"] = `Bearer ${localStorage.token}`;
    }
    return config;
  },
  err => {
    return Promise.reject(err);
  });

// * http response 拦截器
axios.interceptors.response.use(
  response => {
    let data = response.data;
    // * 正常返回数据
    if (data.code === 0) {
      // * 返回data
      return data
    }
    // * 如果code是20103 表示token未认证(后端定义的错误码)
    // * 跳转到login
    if (data.code === 20103) {
      router.replace('/login')
    }
    return Promise.reject(data);
  },
  error => {
    return Promise.reject(error);
  });

Vue.prototype.$http = axios;

现在发起的任何请求之前都会检查是否携带token,如果没有就跳到login界面。

在login中,携带用户名和密码获取token之后,存放到本地。

login.vue:

axios.post('/api/login', {
          email: this.email,
          password: this.password
        }) .then((res) => {
            // * 存储token
            localStorage.setItem('token', res.data.token);
            console.info("login successful");
            // * 跳转回登录前页面
            this.$router.push({path: this.$route.query.redirect || '/admin',})

          }).catch((error) => {
          console.error(error)
        });

前端vue路由权限

现在,访问后端接口的权限问题解决了。但是在vue中我不同的页面有不同的访问权限该如何处理?vue-router官方文档给出了例子:

在需要权限的路由添加meta信息,表明该路由需要登录才能访问,然后在所有路由跳转之前添加处理函数,如果没有auth,跳转到登录:

path: '/admin',
name: 'admin',
component: () => import('../views/admin/Admin.vue'),
// * 需要登录才能访问
meta: {requiresAuth: true},
// * 全局钩子
router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // * 对于需要auth的路径
    // * 没有token信息,redirect to login
    if (!localStorage.token) {
      next({
        path: '/login',
        query: {redirect: to.fullPath}
      })
    } else {
      next()
    }
  } else {
    next() // 确保一定要调用 next()
  }
})

登出的话,清除token信息即可。

localStorage.removeItem("token")

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 延迟加载 改变JS的位置加快网页加载速度
Dec 11 Javascript
JS实现div居中示例
Apr 17 Javascript
使用AngularJS创建单页应用的编程指引
Jun 19 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
Dec 28 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
Sep 08 Javascript
Three.js获取鼠标点击的三维坐标示例代码
Mar 24 Javascript
angular+ionic返回上一页并刷新页面
Aug 08 Javascript
react 父子组件之间通讯props
Sep 08 Javascript
js canvas画布实现高斯模糊效果
Nov 27 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
Aug 12 Javascript
Vue.js中provide/inject实现响应式数据更新的方法示例
Oct 16 Javascript
jquery实现简易验证插件封装
Sep 13 jQuery
vue-next/runtime-core 源码阅读指南详解
Oct 25 #Javascript
JS实现简单tab选项卡切换
Oct 25 #Javascript
vue项目从node8.x升级到12.x后的问题解决
Oct 25 #Javascript
JS实现骰子3D旋转效果
Oct 24 #Javascript
Vue可自定义tab组件用法实例
Oct 24 #Javascript
js实现转动骰子模型
Oct 24 #Javascript
js实现固定区域内的不重叠随机圆
Oct 24 #Javascript
You might like
根德Grundig S400/S500/S700电路分析
2021/03/02 无线电
php实现上传图片保存到数据库的方法
2015/02/11 PHP
PHP开发实现微信退款功能示例
2017/11/25 PHP
PHP实现微信提现功能
2018/09/30 PHP
PHP如何通过带尾指针的链表实现'队列'
2020/10/22 PHP
Jquery下的26个实用小技巧(jQuery tips, tricks & solutions)
2010/03/01 Javascript
两个Javascript小tip资料
2010/11/23 Javascript
jquery动态加载图片数据练习代码
2011/08/04 Javascript
js获取TreeView控件选中节点的Text和Value值的方法
2012/11/24 Javascript
JS特殊函数(Function()构造函数、函数直接量)区别介绍
2013/05/19 Javascript
浅谈javascript中的call、apply、bind
2016/03/06 Javascript
jQuery Ajax页面局部加载方法汇总
2016/06/02 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
2016/08/01 Javascript
教你快速搭建Node.Js服务器的方法教程
2017/03/30 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
2017/07/13 Javascript
Angular2+国际化方案(ngx-translate)的示例代码
2017/08/23 Javascript
JavaScript的数据类型转换原则(干货)
2018/03/15 Javascript
微信小程序使用for循环动态渲染页面操作示例
2018/12/25 Javascript
JavaScript常用工具方法封装
2019/02/12 Javascript
浅谈发布订阅模式与观察者模式
2019/04/09 Javascript
layui 对弹窗 form表单赋值的实现方法
2019/09/04 Javascript
JS严格模式原理与用法实例分析
2020/04/27 Javascript
在vue中获取wangeditor的html和text的操作
2020/10/23 Javascript
python 使用get_argument获取url query参数
2017/04/28 Python
详解python调用cmd命令三种方法
2019/07/08 Python
python如何使用socketserver模块实现并发聊天
2019/12/14 Python
python 在sql语句中使用%s,%d,%f说明
2020/06/06 Python
Python多线程的退出控制实现
2020/08/10 Python
windows+vscode安装paddleOCR运行环境的步骤
2020/11/11 Python
汇科协同Java笔试题
2012/03/31 面试题
感恩祖国演讲稿
2014/09/09 职场文书
授权委托书范本(单位)
2014/09/28 职场文书
教师“一帮一”结对子活动总结
2015/05/07 职场文书
PyQt5爬取12306车票信息程序的实现
2021/05/14 Python
学会Python数据可视化必须尝试这7个库
2021/06/16 Python
oracle delete误删除表数据后如何恢复
2022/06/28 Oracle