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 相关文章推荐
慎用 somefunction.prototype 分析
Jun 02 Javascript
js 实现打印网页中定义的部分内容的代码
Apr 01 Javascript
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
Apr 11 Javascript
Node.js编码规范
Jul 14 Javascript
JavaScript实现的一个倒计时的类
Mar 12 Javascript
理解javascript定时器中的setTimeout与setInterval
Feb 23 Javascript
微信小程序入门之广告条实现方法示例
Dec 05 Javascript
vue + element-ui的分页问题实现
Dec 17 Javascript
bootstrap-table formatter 使用vue组件的方法
May 09 Javascript
微信小程序通过js实现瀑布流布局详解
Aug 28 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
May 15 Javascript
微信小程序轮播图swiper代码详解
Dec 01 Javascript
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
利用PHP实现与ASP Banner组件相似的类
2006/10/09 PHP
用PHP和ACCESS写聊天室(八)
2006/10/09 PHP
在命令行下运行PHP脚本[带参数]的方法
2010/01/22 PHP
PHP HTML JavaScript MySQL代码如何互相传值的方法分享
2012/09/30 PHP
php实现统计二进制中1的个数算法示例
2018/01/23 PHP
jQuery Clone Bug解决代码
2010/12/22 Javascript
前后台交互过程中json格式如何解析以及如何生成
2012/12/26 Javascript
jquery实现最简单的滑动菜单效果代码
2015/09/12 Javascript
12个超实用的JQuery代码片段
2015/11/02 Javascript
简单实现js选项卡切换效果
2016/02/03 Javascript
非常酷炫的Bootstrap图片轮播动画
2016/05/27 Javascript
JSP基于Bootstrap分页显示实例解析
2016/06/12 Javascript
canvas实现手机端用来上传用户头像的代码
2016/10/20 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
2016/12/15 Javascript
基于ajax和jsonp的原生封装(实例)
2017/10/16 Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
2017/10/21 Javascript
微信小程序手机号码验证功能的实例代码
2018/08/28 Javascript
vue中render函数的使用详解
2018/10/12 Javascript
js+html5 canvas实现ps钢笔抠图
2019/04/28 Javascript
基于JavaScript实现大文件上传后端代码实例
2020/08/18 Javascript
ES6的循环与可迭代对象示例详解
2021/01/31 Javascript
使用PyCharm创建Django项目及基本配置详解
2018/10/24 Python
Python定义函数功能与用法实例详解
2019/04/08 Python
Django Rest framework认证组件详细用法
2019/07/25 Python
tensorflow ckpt模型和pb模型获取节点名称,及ckpt转pb模型实例
2020/01/21 Python
Python 利用Entrez库筛选下载PubMed文献摘要的示例
2020/11/24 Python
美国网上鞋城:Shoeline.com
2016/11/17 全球购物
美国保健品专家:Life Extension
2018/05/04 全球购物
Opodo英国旅游网站:预订廉价航班、酒店和汽车租赁
2018/07/14 全球购物
乐高奥地利官方商店:LEGO Shop AT
2019/07/16 全球购物
过滤器的用法
2013/10/08 面试题
《草原》教学反思
2014/02/15 职场文书
跳槽求职信范文
2014/05/26 职场文书
执法作风整顿剖析材料
2014/10/11 职场文书
工作时间擅自离岗检讨书
2014/10/24 职场文书
婚礼迎宾词大全
2015/08/10 职场文书