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

关键词:前后端分离、jwt、登录、权限验证

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

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

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

两个问题

现在面临两个问题,

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

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

后端接口权限

先来解决第二个问题。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")

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

(0)

相关推荐

  • Vue+Express实现登录状态权限验证的示例代码

    前提 对Vue全家桶有基本的认知. 用有node环境 了解express 另外本篇只是介绍登录状态的权限验证,以及登录,注销的前后端交互.具体流程(例如:前端布局,后端密码验证等).以后有时间再对这些边边角角进行补充 一丶业务分析 1.什么情况下进行权限验证? 访问敏感接口 前端向后端敏感接口发送ajax 后端进行session验证,并返回信息 前端axios拦截返回信息,根据返回信息进行操作 进行页面切换 页面切换,触发vue-router的路由守卫 路由守卫根据跳转地址进行验证,如需权限,则

  • vue iview实现动态路由和权限验证功能

    github上关于vue动态添加路由的例子很多,本项目参考了部分项目后,在iview框架基础上完成了动态路由的动态添加和菜单刷新.为了帮助其他需要的朋友,现分享出实现逻辑,欢迎一起交流学习. Github地址 iview-dynamicRouter 实现目标 客户端从服务端拿到路由和权限数据后,刷新项目的路由和菜单列表,并进行权限控制. 项目基础 基础框架: iview组件库官方模板项目 iview-admin 的template分支项目,此项目为 iview-admin 的基础框架代码.项目地

  • Vue 配合eiement动态路由,权限验证的方法

    1.要实现动态路由,只需要在main.js中将所有路由表先规定好,如下 const routes=[ {path:'/login',component:login},/*登录*/ {path:'/home',component:home},/*首页*/ {path:'/monitor',component:monitor},/*实时监控*/ {path: "/orderQuery", component: orderQuery},/*电子围栏*/ {path: "/fence

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

    关键词:前后端分离.jwt.登录.权限验证 最近在做一个小应用,需要用到vue实现登录,以及给不同路由设置权限.在网上看了很多文章,讲的是乱七八糟.感叹国内技术类文章实在是差劲,抄来抄去.这篇文章就说说我最后是如何实现的. 前后端分离项目中,后端提供api接口给前端,使用jwt发放权限. 首先前端提供用户名和密码请求登录接口,后端验证之后返回给前端一个token,之后前端在请求需要权限的接口时携带这个token就可以了. 两个问题 现在面临两个问题, 首先vue中不同的路由有不同的权限,比如我要

  • SpringBoot基于SpringSecurity表单登录和权限验证的示例

    一.简介 上篇介绍了一个自己做的管理系统,最近空闲的时间自己在继续做,把之前登录时候自定义的拦截器过滤器换成了基于SpringSecurity来做,其中遇到了很多坑,总结下,大家有遇到类似问题的话就当是为大家闭坑吧. 二.项目实现功能和成果展示 首先来看下登录界面:这是我输入的一个正确的信息,点击登录后SpringSecurity会根据你输入的用户名和密码去验证是否正确,如果正确的话就去你定义的页面,我这里定义的是查询教师信息页面.来看下代码吧. 三.准备工作(前台页面.实体类) 实体类Teac

  • .net MVC使用IPrincipal进行Form登录即权限验证(3)

    .net MVC使用IPrincipal进行Form登录即权限验证,供大家参考,具体内容如下 1.在MVC项目中添加用户类,可以根据实际项目需求添加必要属性 public class UserData { /// <summary> /// ID /// </summary> public int UserId { get; set; } /// <summary> /// 用户名 /// </summary> public string UserName

  • App登陆java后台处理和用户权限验证

    最近做一个app项目,后台我独自一人开发,开发任务顺序安排上没有把登陆,注册和权限验证这些基本功能放在第一阶段开发,现在是部分业务相关功能已经完成,但是用户入口竟然还没有,只能说明当初需求分析的时候还是太过于着急了,把最基本的用户入口给放到后面了. 现在就需要在现有代码的基础上添加用户登录和权限验证功能. 关于登录和权限验证方面,参照以前做iOS的开发经验,App端提供用户名和密码换取token,每次通过换取的token请求需要登陆权限的操作. 现在反过来,我就需要考虑下面几个问题: 1.在现有

  • spring boot 利用注解实现权限验证的实现代码

    这里使用 aop 来实现权限验证 引入依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-aop</artifactId> </dependency> 定义注解 package com.lmxdawn.api.admin.annotation; import java.lang.annotation.El

  • Vue前端登录token信息验证功能实现

    用户在首次访问网站时,应在登录页面填写账号密码,前端携带用户信息向服务器请求. 1.服务器验证用户信息 验证失败:给前端响应数据 验证通过:对该用户创建token,并以响应数据返回给前端 2.前端接受后端响应的数据 错误信息:提示错误消息 正确信息:页面进行跳转至首页,同时保存token(可以保存在cookie或localstorage) 3.用户点击某功能模块的触发请求(比如某功能有权限设置或是是否需要token) 利用路由守卫beforeEach() 将保存的token添加至请求拦截器的请求

  • springMVC 用户登录权限验证实现过程解析

    通过上网搜资料显示,使用filter和interceptor都可以实现.不过推荐使用interceptor. 下面就使用Interceptor实现用户登录权限验证功能. 拦截器需要实现Inceptor拦截器接口的三个方法. 1.preHandle方法 顾名思义,该方法将在请求处理之前进行调用.SpringMVC 中的Interceptor 是链式的调用的,在一个应用中或者说是在一个请求中可以同时存在多个Interceptor .每个Interceptor 的调用会依据它的声明顺序依次执行,而且最

  • vue登录注册及token验证实现代码

    在大多数网站中,实现登录注册都是结合本地存储cookie.localStorage和请求时验证token等技术.而对于某些功能页面,会尝试获取本地存储中的token进行判断,存在则可进入,否则跳到登录页或弹出登录框. 而在vue单页中,我们可以通过监控route对象,从中匹配信息去决定是否验证token,然后定义后续行为. 具体实现代码如下: 1. 利用router.beforeEach钩子, 判断目标路由是否携带了相关meta信息 // router.js import Vue from 'v

随机推荐