Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用

概述

上一篇我们介绍了如何使用vue resource处理HTTP请求,结合服务端的REST API,就能够很容易地构建一个增删查改应用。
这个应用始终遗留了一个问题,Web App在访问REST API时,没有经过任何认证,这使得服务端的REST API是不安全的,只要有人知道api地址,就可以调用API对服务端的资源进行修改和删除。
今天我们就来探讨一下如何结合Web API来限制资源的访问。

本文的主要内容如下:

  1. 介绍传统的Web应用和基于REST服务的Web应用
  2. 介绍OAuth认证流程和密码模式
  3. 创建一个基于ASP.NET Identity的Web API应用程序
  4. 基于$.ajax实现OAuth的注册、登录、注销和API调用
  5. 基于vue-resource实现OAuth的注册、登录、注销和API调用

本文的最终示例是结合上一篇的CURD,本文的登录、注册、注销和API调用功能实现的。

本文9个示例的源码已放到GitHub:https://github.com/keepfool/vue-tutorials/tree/master/04.OAuth

OAuth介绍

传统的Web应用

在传统的Web应用程序中,前后端是放在一个站点下的,我们可以通过会话(Session)来保存用户的信息。

例如:一个简单的ASP.NET MVC应用程序,用户登录成功后,我们将用户的ID记录在Session中,假设为Session["UserID"]。
前端发送ajax请求时,如果这个请求要求已登录的用户才能访问,我们只需在后台Controller中验证Session["UserID"]是否为空,就可以判断用户是否已经登录了。

这也是传统的Web应用能够逃避HTTP面向无连接的方法。

基于REST服务的Web应用

当今很多应用,客户端和服务端是分离的,服务端是基于REST风格构建的一套Service,客户端是第三方的Web应用,客户端通过跨域的ajax请求获取REST服务的资源。

然而REST Service通常是被设计为无状态的(Stateless),这意味着我们不能依赖于Session来保存用户信息,也不能使用Session["UserID"]这种方式确定用户身份。

解决这个问题的方法是什么呢?常规的方法是使用OAuth 2.0。

对于用户相关的OpenAPI,为了保护用户数据的安全和隐私,第三方Web应用访问用户数据前都需要显式的向用户征求授权。
相比于OAuth 1.0,OAuth 2.0的认证流程更加简单。

专用名词介绍

在了解OAuth 2.0之前,我们先了解几个名词:

  1. Resource:资源,和REST中的资源概念一致,有些资源是访问受保护的
  2. Resource Server:存放资源的服务器
  3. Resource Owner:资源所有者,本文中又称为用户(user)
  4. User Agent:用户代理,即浏览器
  5. Client: 访问资源的客户端,也就是应用程序
  6. Authorization Server:认证服务器,用于给Client提供访问令牌的服务器
  7. Access Token:访问资源的令牌,由Authorization Server器授予,Client访问Resource时,需提供Access Token
  8. Bearer Token:Bearer Token是Access Token的一种,另一种是Mac Token。
  9. Bearer Token的使用格式为:Bearer XXXXXXXX

Token的类型请参考:https://tools.ietf.org/html/draft-ietf-oauth-v2-15#section-7.1

有时候认证服务器和资源服务器可以是一台服务器,本文中的Web API示例正是这种运用场景。

OAuth认证流程

在知道这几个词以后,我们用这几个名词来编个故事。

简化版本

这个故事的简化版本是:用户(Resource Owner)访问资源(Resource)。

具体版本

简化版的故事只有一个结果,下面是这个故事的具体版本:

  1. 用户通过浏览器打开客户端后,客户端要求用户给予授权。
  2. 客户端可以直接将授权请求发给用户(如图所示),或者发送给一个中间媒介,比如认证服务器。
  3. 用户同意给予客户端授权,客户端收到用户的授权。
  4. 授权模式(Grant Type)取决于客户端使用的模式,以及认证服务器所支持的模式。
  5. 客户端提供身份信息,然后向认证服务器发送请求,申请访问令牌
  6. 认证服务器验证客户端提供的身份信息,如果验证通过,则向客户端发放令牌
  7. 客户端使用访问令牌,向资源服务器请求受保护的资源
  8. 资源服务器验证访问令牌,如果有效,则向客户端开放资源

以上几个步骤,(B)是较为关键的一个,即用户怎么样才能给客户端授权。有了这个授权以后,客户端就可以获取令牌,进而通过临牌获取资源。这也是OAuth 2.0的运行流程,详情请参考:https://tools.ietf.org/html/draft-ietf-oauth-v2-15#section-1.2

客户端的授权模式

客户端必须得到用户的授权(authorization grant),才能获得令牌(access token)。

OAuth 2.0定义了四种授权方式:

  1. 授权码模式(authorization code)
  2. 简化模式(implicit)
  3. 密码模式(resource owner password credentials)
  4. 客户端模式(client credentials)

本文的示例是基于密码模式的,我就只简单介绍这种模式,其他3我就不介绍了。

密码模式

密码模式(Resource Owner Password Credentials Grant)中,用户向客户端提供自己的用户名和密码。客户端使用这些信息,向服务端申请授权。

在这种模式中,用户必须把自己的密码给客户端,但是客户端不得储存密码。这通常用在用户对客户端高度信任的情况下,比如客户端是操作系统的一部分,或者由一个著名公司出品。

密码嘛事的执行步骤如下:

(A)用户向客户端提供用户名和密码。

(B)客户端将用户名和密码发给认证服务器,向后者请求令牌。

(C)认证服务器确认无误后,向客户端提供访问令牌。

(B)步骤中,客户端发出的HTTP请求,包含以下参数:

  1. grant_type:表示授权类型,此处的值固定为"password",必选项。
  2. username:表示用户名,必选项。
  3. password:表示用户的密码,必选项。
  4. scope:表示权限范围,可选项。

注意:在后面的客户端示例中,除了提供username和password,grant_type也是必须指定为"password",否则无法获取服务端的授权。

服务端环境准备

如果您是前端开发人员,并且未接触过ASP.Net Web API,可以跳过此段落。

Authentication选择Individual User Accounts

创建这个Web API工程时,VS会自动引入Owin和AspNet.Identity相关的库。

修改ValuesController,除了IEnumerable<string> Get()操作外,其他操作都删除,并为该操作应用[Authorize]特性,这表示客户端必须通过身份验证后才能调用该操作。

public class ValuesController : ApiController
{
  // GET: api/Values
  [Authorize]
  public IEnumerable<string> Get()
  {
    return new string[] { "value1", "value2" };
  }
}

添加Model, Controller

初始化数据库

执行以下3个命令

CustomersController类有5个Action,除了2个GET请求外,其他3个请求分别是POST, PUT和DELETE。
为这3个请求添加[Authorize]特性,这3个请求必须通过身份验证才能访问。

public class CustomersController : ApiController
{
  private ApplicationDbContext db = new ApplicationDbContext();

  // GET: api/Customers
  public IQueryable<Customer> GetCustomers()
  {
    return db.Customers;
  }

  // GET: api/Customers/5
  [ResponseType(typeof(Customer))]
  public async Task<IHttpActionResult> GetCustomer(int id)
  {
    Customer customer = await db.Customers.FindAsync(id);
    if (customer == null)
    {
      return NotFound();
    }

    return Ok(customer);
  }

  // PUT: api/Customers/5
  [Authorize]
  [ResponseType(typeof(void))]
  public async Task<IHttpActionResult> PutCustomer(int id, Customer customer)
  {
   // ...
  }

  // POST: api/Customers
  [Authorize]
  [ResponseType(typeof(Customer))]
  public async Task<IHttpActionResult> PostCustomer(Customer customer)
  {
    // ...
  }

  // DELETE: api/Customers/5
  [ResponseType(typeof(Customer))]
  [Authorize]
  public async Task<IHttpActionResult> DeleteCustomer(int id)
  {
   // ...
  }
}

让Web API以CamelCase输出JSON

在Global.asax文件中添加以下几行代码:

var formatters = GlobalConfiguration.Configuration.Formatters;
var jsonFormatter = formatters.JsonFormatter;
var settings = jsonFormatter.SerializerSettings;
settings.Formatting = Formatting.Indented;
settings.ContractResolver = new CamelCasePropertyNamesContractResolver();

启用CORS

在Nuget Package Manager Console输入以下命令:

Install-Package Microsoft.AspNet.WebApi.Cors

在WebApiConfig中启用CORS:

public static class WebApiConfig
{
  public static void Register(HttpConfiguration config)
  {
    var cors = new EnableCorsAttribute("*", "*", "*");
    config.EnableCors(cors);

    // ...

  }
}

类说明

在执行上述步骤时,VS已经帮我们生成好了一些类

IdentityModels.cs:包含ApplicationDbContext类和ApplicationUser类,无需再创建DbContext类

public class ApplicationUser : IdentityUser
{
  // ...
}

public class ApplicationDbContext : IdentityDbContext<ApplicationUser>
{
  // ...
}

Startup.Auth.cs:用于配置OAuth的一些属性。

public partial class Startup
{
  public static OAuthAuthorizationServerOptions OAuthOptions { get; private set; }

  public static string PublicClientId { get; private set; }

  // For more information on configuring authentication, please visit http://go.microsoft.com/fwlink/?LinkId=301864
  public void ConfigureAuth(IAppBuilder app)
  {
    // ..

    // Configure the application for OAuth based flow
    PublicClientId = "self";
    OAuthOptions = new OAuthAuthorizationServerOptions
    {
      TokenEndpointPath = new PathString("/Token"),
      Provider = new ApplicationOAuthProvider(PublicClientId),
      AuthorizeEndpointPath = new PathString("/api/Account/ExternalLogin"),
      AccessTokenExpireTimeSpan = TimeSpan.FromDays(14),
      // In production mode set AllowInsecureHttp = false
      AllowInsecureHttp = true
    };

    // Enable the application to use bearer tokens to authenticate users
    app.UseOAuthBearerTokens(OAuthOptions);

    // ..
  }
}

这些OAuth配置项,我们只用关注其中的两项:

  1. TokenEndpointPath:表示客户端发送验证请求的地址,例如:Web API的站点为www.example.com,验证请求的地址则为www.example.com/token。
  2. UseOAuthBearerTokens:使用Bearer类型的token_type(令牌类型)。

ApplicationOAuthProvider.cs:默认的OAuthProvider实现,GrantResourceOwnerCredentials方法用于验证用户身份信息,并返回access_token(访问令牌)。

public override async Task GrantResourceOwnerCredentials(OAuthGrantResourceOwnerCredentialsContext context)
{
  // ...
}

通俗地讲,客户端输入用户名、密码,点击登录后,会发起请求到www.example.com/token。

token这个请求在服务端执行的验证方法是什么呢?正是GrantResourceOwnerCredentials方法。

客户端发起验证请求时,必然是跨域的,token这个请求不属于任何ApiController的Action,而在WebApiConfig.cs中启用全局的CORS,只对ApiController有效,对token请求是不起作用的。
所以还需要在GrantResourceOwnerCredentials方法中添加一行代码:

public override async Task GrantResourceOwnerCredentials(OAuthGrantResourceOwnerCredentialsContext context)
{
  context.Response.Headers.Add("Access-Control-Allow-Origin", new []{"*"});
  // ...
}

IdentityConfig.cs:配置用户名和密码的复杂度,主要用于用户注册时。例如:不允许用户名为纯字母和数字的组合,密码长度至少为6位…。

public static ApplicationUserManager Create(IdentityFactoryOptions<ApplicationUserManager> options, IOwinContext context)
{
  var manager = new ApplicationUserManager(new UserStore<ApplicationUser>(context.Get<ApplicationDbContext>()));
  // Configure validation logic for usernames
  manager.UserValidator = new UserValidator<ApplicationUser>(manager)
  {
    AllowOnlyAlphanumericUserNames = false,
    RequireUniqueEmail = true
  };
  // Configure validation logic for passwords
  manager.PasswordValidator = new PasswordValidator
  {
    RequiredLength = 6,
    RequireNonLetterOrDigit = true,
    RequireDigit = true,
    RequireLowercase = true,
    RequireUppercase = true,
  };
  // ...
  return manager;
}

使用Postman测试GET和POST请求

测试GET请求

GET请求测试成功,可以获取到JSON数据。

测试POST请求

POST请求测试不通过,提示:验证不通过,请求被拒绝。

基于$.ajax实现注册、登录、注销和API调用

服务端的环境已经准备好了,现在我们就逐个实现用户注册、登录,以及API调用功能吧。

注册

页面的HTML代码如下:

<div id="app">
  <div class="container">
    <span id="message">{{ msg }}</span>
  </div>
  <div class="container">
      <div class="form-group">
        <label>电子邮箱</label>
        <input type="text" v-model="registerModel.email" />
      </div>
      <div class="form-group">
        <label>密码</label>
        <input type="text" v-model="registerModel.password" />
      </div>

      <div class="form-group">
        <label>确认密码</label>
        <input type="text" v-model="registerModel.confirmPassword" />
      </div>

      <div class="form-group">
        <label></label>
        <button @click="register">注册</button>
      </div>
  </div>
</div>

创建Vue实例,然后基于$.ajax发送用户注册请求:

var demo = new Vue({
  el: '#app',
  data: {
    registerUrl: 'http://localhost:10648/api/Account/Register',
    registerModel: {
      email: '',
      password: '',
      confirmPassword: ''
    },
    msg: ''
  },
  methods: {
    register: function() {
      var vm = this
      vm.msg = ''

      $.ajax({
        url: vm.registerUrl,
        type: 'POST',
        dataType: 'json',
        data: vm.registerModel,
        success: function() {
          vm.msg = '注册成功!'
        },
        error: vm.requestError
      })
    },
    requestError: function(xhr, errorType, error) {
      this.msg = xhr.responseText
    }
  }
})

登录和注销

登录的HTML代码:

<div id="app">
  <div class="container text-center">
    <span id="message">{{ msg }}</span>
  </div>
  <div class="container">
    <div class="account-info">
      <span v-if="userName">{{ userName }} | <a href="#" rel="external nofollow" @click="logout">注销</a></span>
    </div>
  </div>
  <div class="container">
      <div class="form-group">
        <label>电子邮箱</label>
        <input type="text" v-model="loginModel.username" />
      </div>
      <div class="form-group">
        <label>密码</label>
        <input type="text" v-model="loginModel.password" />
      </div>
      <div class="form-group">
        <label></label>
        <button @click="login">登录</button>
      </div>
  </div>
</div>

创建Vue实例,然后基于$.ajax发送用户登录请求:

var demo = new Vue({
  el: '#app',
  data: {
    loginUrl: 'http://localhost:10648/token',
    logoutUrl: 'http://localhost:10648/api/Account/Logout',
    loginModel: {
      username: '',
      password: '',
      grant_type: 'password'
    },
    msg: '',
    userName: ''
  },

  ready: function() {
    this.userName = sessionStorage.getItem('userName')
  },
  methods: {
    login: function() {
      var vm = this
        vm.msg = ''
        vm.result = ''

      $.ajax({
        url: vm.loginUrl,
        type: 'POST',
        dataType: 'json',
        data: vm.loginModel,
        success: function(data) {
          vm.msg = '登录成功!'
          vm.userName = data.userName
          sessionStorage.setItem('accessToken', data.access_token)
          sessionStorage.setItem('userName', vm.userName)
        },
        error: vm.requestError
      })
    },
    logout: function() {
      var vm = this
        vm.msg = ''

      $.ajax({
        url: vm.logoutUrl,
        type: 'POST',
        dataType: 'json',
        success: function(data) {

          vm.msg = '注销成功!'
          vm.userName = ''
          vm.loginModel.userName = ''
          vm.loginModel.password = ''

          sessionStorage.removeItem('userName')
          sessionStorage.removeItem('accessToken')
        },
        error: vm.requestError
      })
    },
    requestError: function(xhr, errorType, error) {
      this.msg = xhr.responseText
    }
  }
})

在试验这个示例时,把Fiddler也打开,我们一共进行了3次操作:

  1. 第1次操作:输入了错误的密码,服务端响应400的状态码,并提示了错误信息。
  2. 第2次操作:输入了正确的用户名和密码,服务端响应200的状态码
  3. 第3次操作:点击右上角的注销链接

注意第2次操作,在Fiddler中查看服务端返回的内容:

服务端返回了access_token, expires_in, token_type,userName等信息,在客户端可以用sessionStorage或localStorage保存access_token。

调用API

取到了access_token后,我们就可以基于access_token去访问服务端受保护的资源了。

这里我们要访问的资源是/api/Values,它来源于ValuesController的Get操作。

基于注册画面,添加一段HTML代码:

<div class="container text-center">
  <div>
    <button @click="callApi">调用API</button>
  </div>
  <div class="result">
    API调用结果:{{ result | json }}
  </div>
</div>

在Vue实例中添加一个callApi方法:

callApi: function() {
  var vm = this
    vm.msg = ''
    vm.result = ''

    headers = {}
    headers.Authorization = 'Bearer ' + sessionStorage.getItem('accessToken');

  $.ajax({
    type: 'get',
    dataTye: 'json',
    url: vm.apiUrl,
    headers: headers,
    success: function(data) {
      vm.result = data
    },
    error: vm.requestError
  })
}

在调用callApi方法时,设置了请求头的Authorization属性,其格式为:"Bearer access_token"。
由于服务端指定使用了Bearer类型的access token,所以客户端必须使用这种格式将access token传给资源服务器。

在试验这个示例时,我们一共进行了5次操作:

  1. 第1次操作:没有输入用户名和密码,直接点击[调用API]按钮,服务端返回401的状态码,表示该请求未授权。
  2. 第2次操作:输入用户名和密码,然后店点击登录按钮,登录成功。
  3. 第3次操作:点击[调用API]按钮,服务端返回200的状态码,请求成功。
  4. 第4次操作:点击[注销]链接,注销成功。
  5. 第5次操作:再次点击[调用API]按钮,服务端返回401的状态码,表示该请求未授权。

有人可能会注意到,为什么每次点击[调用API]按钮,都发起了两次请求?

这是因为当浏览器发送跨域请求时,浏览器都会先发送一个OPTIONS预请求(preflight request)给目标站点,用于确认目标站点是否接受跨域请求,如果目标站点不支持跨域请求,浏览器会提示错误:

No 'Access-Control-Allow-Origin' header is present on the requested resource.

如果是POST请求,且数据类型(Content-Type)是application/x-www-form-urlencoded,multipart/form-data 或 text/plain中的一种,则浏览器不会发送预请求,上图的/token请求就是满足该条件的。

zepto会自动将非GET请求的Content-Type设置为application/x-www-form-urlencoded

if (settings.contentType || (settings.contentType !== false && settings.data && settings.type.toUpperCase() != 'GET'))
 setHeader('Content-Type', settings.contentType || 'application/x-www-form-urlencoded')
image

我们还是通过Fidder看一下第1次/api/Values请求和响应的Headers信息

请求的Headers信息,它是一次OPTIONS请求。

响应的Headers信息,Access-Control-Allow-Origin: *表示允许所有外部站点对目标站点发送跨域请求。

更多CORS的知识,请参考MDN上的说明:
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

基于vue-resource实现注册、登录和API调用

基于vue-resource实现这3项功能时,沿用上面的HTML代码。

注册

更为简洁的register方法:

register: function() {
  this.$http.post(this.registerUrl, this.registerModel)
    .then((response) => {
      this.msg = '注册成功!'
    }).catch((response) => {
      this.msg = response.json()
    })
}

注意:当使用vue-resource发送注册的POST请求时,Fiddler捕获到了2次请求,第1次是由浏览器发送的OPTIONS预请求,第2次才是实际的POST请求。这和使用$.ajax时是不一样的,因为$.ajax会将非GET请求的Content-Type设置为application/x-www-form-urlencoded,而vue-resource发送POST请求的Content-Type为application/json;charset=UTF-8。

启用emulateJSON选项,可以让浏览器不发送OPTIONS预请求,有两种启用方式。

1.全局启用

Vue.http.options.emulateJSON = true

2.局部启用

this.$http.post(this.registerUrl, this.registerModel ,{ emulateJSON : true})
  .then( (response) => {
    this.msg = '注册成功!'
  })

启用了emulateJSON选项后,使得POST请求的Content-Type变为application/x-www-form-urlencoded

登录和注销

登录和注销的方法:

login: function() {

  this.$http.post(this.loginUrl, this.loginModel)
    .then((response) => {
      var body = response.json()
      this.msg = '登录成功!'
      this.userName = body.userName

      sessionStorage.setItem('accessToken', body.access_token)
      sessionStorage.setItem('userName', body.userName)

    }).catch(this.requestError)
},
logout: function() {

  this.$http.post(this.logoutUrl)
    .then((response) => {
      this.msg = '注销成功!'
      this.userName = ''
      this.loginModel.username = ''
      this.loginModel.password = ''

      sessionStorage.removeItem('userName')
      sessionStorage.removeItem('accessToken')

    }).catch(this.requestError)
},
requestError: function(response) {
  this.msg = response.json()
}

API调用

调用API的方法也更为简洁:

callApi: function() {

  var headers = {}
  headers.Authorization = 'Bearer ' + sessionStorage.getItem('accessToken')

  this.$http.get(this.apiUrl, {
      headers: headers
    })
    .then((response) => {
      this.result = response.json()
    }).catch(this.requestError)
}

同样的,在发送请求前,需要将access token添加到请求头。

综合示例

本文在准备服务端环境的时候,提供了一个CustomersController,除了GET操作,其他操作的访问都是受保护的,需要用户登录以后才能操作。

现在我们来实现这个示例, 该示例结合了上一篇的CURD示例,以及本文的注册、登录、注销功能。

具体代码我就不再贴出来了,大家结合源代码试一试吧。

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

时间: 2017-05-08

Vue.js实现一个SPA登录页面的过程【推荐】

技术栈 vue.js 主框架 vuex 状态管理 vue-router 路由管理 一般过程 在一般的登录过程中,一种前端方案是: 检查状态:进入页面时或者路由变化时检查是否有登录状态(保存在cookie或者本地存储的值): 如果有登录态则查询登录信息(uid,头像等...)并保存起来:如果没有则跳转到登录页: 在登录页面(或者登录框),校检用户输入信息是否合法: 校检通过后发送登录请求:校检不成功则反馈给用户: 登录成功则从后端数据中取出session信息保存登录状态(可能需要跳转);登录不成功

Vue学习之路之登录注册实例代码

根据Vue.js + Element UI + MongoDB进行开发 P1 安装Vue-CLI Vue.js文档 利用Vue.js提供的一个官方命令行工具 # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 安装依赖,走你 $ cd my-project $ npm install $ npm run dev Vue.js 主要目录结构 . ├

关于在vue-cli中使用微信自动登录和分享的实例

(以下所有接口由后台提供) 一.微信自动登录 //定义事件 methods:{ //判断是否微信登陆 是不是微信浏览器 isWeiXin() { let ua = window.navigator.userAgent.toLowerCase(); console.log(ua);//mozilla/5.0 (iphone; cpu iphone os 9_1 like mac os x) applewebkit/601.1.46 (khtml, like gecko)version/9.0 mo

Vue-router路由判断页面未登录跳转到登录页面的实例

如下所示: router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requireAuth)){ // 判断该路由是否需要登录权限 if (token) { // 判断当前的token是否存在 next(); } else { next({ path: '/login', query: {redirect: to.fullPath} // 将跳转的路由path作为参数,登录成功后跳转到该

Vue利用路由钩子token过期后跳转到登录页的实例

在Vue2.0中的路由钩子主要是用来拦截导航,让它完成跳转或前取消,可以理解为路由守卫. 分为全局导航钩子,单个路由独享的钩子,组件内钩子. 三种 类型的钩子只是用的地方不一样,都接受一个函数作为参数,函数传入三个参数,分别为to,from,next. 其中next有三个方法 (1)next(); //默认路由 (2)next(false); //阻止路由跳转 (3)next({path:'/'}); //阻止默认路由,跳转到指定路径 这里我使用了组件内钩子进行判断token过期后跳转到登录页,

Vue中保存用户登录状态实例代码

首先我们假设,这里的登录组件(register.vue)是App.vue组件的子组件,是通过路由进入登录组件的. 登录组件中用户点击登录后,后台会传过来一个用户名,我的App.vue组件中需要拿到这个用户名,并将上面的"登录注册"字样变为"用户名". 为了保证用户刷新后用户名不会消失,这里我用到了sessionStorage 代码如下: register.vue中用户点击登录触发signIn方法 signIn(){ this.formData = $(".

vue+axios实现登录拦截的实例代码

一个项目学会vue全家桶+axios实现登录.拦截.登出功能,以及利用axios的http拦截器拦截请求和响应. 前言 该项目是利用了Github 提供的personal token作为登录token,通过token访问你的Repository List.通过这个项目学习如何实现一个前端项目中所需要的 登录及拦截.登出.token失效的拦截及对应 axios 拦截器的使用. 准备你需要先生成自己的 Github Personal Token( 生成Token). Token 生成后 访问Demo

vue.js实现用户评论、登录、注册、及修改信息功能

vue.js实现用户评论.登录.注册.及修改用户部分信息功能代码.效果图如下: 登入后: 登入前: 登录框: 注册框: html代码部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>index</title> <link rel="stylesheet" href=&quo

vue路由跳转时判断用户是否登录功能的实现

通过判断该用户是否登录过,如果没有登录则跳转到login登录路由,如果登录则正常跳转. 一丶首先在用户登录前后分别给出一个状态来标识此用户是否登录(建议用vuex): 简单用vuex表示一下,不会可以自己去官网多看看: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex); var state = { isLogin:0, //初始时候给一个 isLogin=0 表示用户未登录 }; const mutations = { cha

vue组件父与子通信详解(一)

本文实例为大家分享了vue组件父与子通信的具体代码,供大家参考,具体内容如下 一.组件间通信(父组件    -->  子组件) 步骤: ①父组件在调用子组件 传值 <child-component myValue="123"> </child-component> ②在子组件中 获取父组件传来的值 Vue.component('child-component',{ props:['myValue'], template:'' }) 代码1: <!do

vue组件间通信子与父详解(二)

接着vue组件父与子通信详解继续学习. 二.组件间通信(子组件传值给父组件) 通过事件的方式来完成数据的传输. ①在父组件中 定义一个方法,用来接收子组件所通过事件传来的值 methods:{ recvMsg:function(msg){ //参数msg就是子组件通过事件出来的数据 } } ②绑定事件处理函数 事件一般情况 都是自定义事件 <child-component @myEvent="recvMsg"></child-component> ③在子组件触发

vue组件间的参数传递实例详解

场景分析 在前端开发中,我们常常会运用到"组件库".在main入口中引入组件库,就可以很轻松的在页面中引入,并做一些基本的配置,如样式,颜色等.只需要在引入的组件中写入特定的属性,就能够定义. 举例说明 例如:element-ui组件库中使用switch开关,有个属性active-color是设置"打开时"的背景色.change事件是触发状态的事件. <el-switch v-model="value" :active-color=&quo

vue组件三大核心概念图文详解

前言 本文主要介绍属性.事件和插槽这三个vue基础概念.使用方法及其容易被忽略的一些重要细节.如果你阅读别人写的组件,也可以从这三个部分展开,它们可以帮助你快速了解一个组件的所有功能. 本文的代码请猛戳 github博客 ,纸上得来终觉浅,大家动手多敲敲代码! 一.属性 1.自定义属性props prop 定义了这个组件有哪些可配置的属性,组件的核心功能也都是它来确定的.写通用组件时,props 最好用对象的写法,这样可以针对每个属性设置类型.默认值或自定义校验属性的值,这点在组件开发中很重要,

vue组件 keep-alive 和 transition 使用详解

1.keep-alive 能在组件切换过程中将状态保留在内存中,防止重复渲染DOM. 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们.和 相似, 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中. 当组件在 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行. include: 字符串或正则表达式.只有匹配的组件会被缓存. exclude: 字符串或正则表达式.任何匹配的组件都不会被缓存. // 组件 export

Vue组件之间四种通信方式详解

目录 前言 父子组件通信​ 父组件与子孙组件的通信​ 父组件获取子组件数据​ 无需考虑组件关系的通信​ 前言 vue 框架提供了前端开发组件的思想,可以通过组件来组合成一个完整的页面,都是随着组件数量原来越多,组件之间难免需要相互通信,那么如何实现组件之间的通信呢?下面介绍 vue 组件通信的几种方法 父子组件通信​ 父组件传递 props 给子组件(数据以及改变数据的方法),子组件通过 $emit 来更新父组件的状态 父组件定义,声明状态 { name: 'baidu.com' } 以及可以改

Vue组件的继承用法示例详解

目录 Vue组件的继承用法 Vue组件的继承用法 vue组件的继承适用于UI几乎一样,只是数据不一样的情况下,但是这种情况通过统一封装组件也是能实现的,小功能建议用封装,大功能建议用组件继承,因为大功能在结合搜参数的需要多重的判断,这样会导致封装的组件比较繁杂,出现过多的判断,用继承可以改写基类中的方法和数据 基类案例: <template> <div class="hello"> 父类:{{name}} <span>{{title}}</sp

Vue组件库发布到npm详解

制作了一套自己的组件库,并发布到npm上,项目代码见https://github.com/hamger/hg-vcomponents 前期准备 有一个npm账号 安装了vue-cli 搭建项目 vue init webpack hg-vcomponents cd hg-vcomponents cnpm install 目录结构 - vue-flag-list + build + dist // 存放发布到npm的代码 - src - components // 存放组件源代码 和 README.

vue组件文档生成备注详解

目录 vue组件文档生成备注 内容实现 Vuese自动生成vue组件文档 安装Vuese 在根目录下新增配置文件 .vueserc 在package.json新增脚本,并启动 vue组件文档生成备注 在我们团队开发时一定会有一些公共组件诞生出来,那么这些诞生出来的组件我们要怎么让别人知道并且使用呢.写一个专门维护的文档页面?专人去维护?还是选择一个线上公共word的更新上去? 其他的我就不说什么优缺点了 自己体会 我只说一下我们团队中是怎么维护这些公共组件的. 说之前我们先了解一下这个插件vue

Vue组件如何设置Props实例详解

目录 属性类型 属性默认值 属性值验证 Composition API 中设置属性 总结 在 Vue 中构建组件通常需要定义一些属性,以使组件可以更好复用,在这种情况下会使用 props 来自定义数据来传递数据.接下来以一个简单的组件来介绍如何使用组件 props . <CrayonAlert title="友情提示" description="请输入真实的信息" /> 如上面代码所示,组件定义两个属性 title 和 description,组件代码如