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 相关文章推荐
Json对象替换字符串占位符实现代码
Nov 17 Javascript
阻止子元素继承父元素事件具体思路及实现
May 02 Javascript
new Date()问题在ie8下面的处理方法
Jul 31 Javascript
javascript获取四位数字或者字母的随机数
Jan 09 Javascript
使用jQuery管理选择结果
Jan 20 Javascript
浅析javascript中的DOM
Mar 01 Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
Sep 24 Javascript
js命名空间写法示例
Dec 18 Javascript
详解vue2路由vue-router配置(懒加载)
Apr 08 Javascript
深入理解Vue.js源码之事件机制
Sep 27 Javascript
JavaScript 中使用 Generator的方法
Dec 29 Javascript
vue实现带复选框的树形菜单
May 27 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中MVC的开发经验分享
2012/05/17 PHP
PHP里的单例类写法实例
2015/06/25 PHP
PHP封装的Twitter访问类实例
2015/07/18 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2021/03/09 PHP
GreyBox技术总结(转)
2010/11/23 Javascript
改进版通过Json对象实现深复制的方法
2012/10/24 Javascript
Javascript实现禁止输入中文或英文的例子
2014/12/09 Javascript
javascript随机抽取0-100之间不重复的10个数
2016/02/25 Javascript
JavaScript获取IP获取的是IPV6 如何校验
2016/06/12 Javascript
JS实现鼠标移上去显示图片或微信二维码
2016/12/14 Javascript
Angularjs按需查询实例代码
2017/10/30 Javascript
JQuery实现table中tr上移下移的示例(超简单)
2018/01/08 jQuery
学习Vue组件实例
2018/04/28 Javascript
vue视图不更新情况详解
2019/05/16 Javascript
在Webpack中用url-loader处理图片和字体的问题
2020/04/28 Javascript
[58:21]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第二场
2018/04/04 DOTA
[48:30]LGD vs infamous Supermajor小组赛D组 BO3 第一场 6.3
2018/06/04 DOTA
Python获取远程文件大小的函数代码分享
2014/05/13 Python
Python遍历目录的4种方法实例介绍
2015/04/13 Python
python实现马耳可夫链算法实例分析
2015/05/20 Python
关于Python如何避免循环导入问题详解
2017/09/14 Python
深入分析python数据挖掘 Json结构分析
2018/04/21 Python
python实现下载pop3邮件保存到本地
2018/06/19 Python
解决python写入mysql中datetime类型遇到的问题
2018/06/21 Python
python如何生成网页验证码
2018/07/28 Python
django 模版关闭转义方式
2020/05/14 Python
python和opencv构建运动检测器的实现
2021/03/03 Python
详解H5本地储存Web Storage
2017/07/03 HTML / CSS
英国著名书店:Foyles
2018/12/01 全球购物
《寓言两则》教学反思
2014/02/27 职场文书
文明家庭先进事迹材料
2014/05/14 职场文书
2014党员学习习主席讲话思想汇报
2014/09/15 职场文书
办公室管理规章制度
2015/08/04 职场文书
Python获取字典中某个key的value
2022/04/13 Python