接上文，https://www.jianshu.com/p/c5f9ea3b4b65 ASP.NET Core 2.1 JWT Token （一）。
如下演示在项目中的 简单 的 实际使用方式：
在后端生成token
1.在Startup.cs中配置 服务 ，添加jwt 验证 服务添加服务 ( 在ConfigureServices方法中 )
services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
.AddJwtBearer(options => {
options.TokenValidationParameters = new TokenValidationParameters
{
ValidateIssuer = true,//是否验证Issuer
ValidateAudience = true,//是否验证Audience
ValidateLifetime = true,//是否验证失效时间
ValidateIssuerSigningKey = true,//是否验证SecurityKey
ValidAudience = "igbom_web",//Audience
ValidIssuer = "igbom_web",//Issuer，这两项和前面签发jwt的设置一致
IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(Configuration["SecurityKey"]))//拿到SecurityKey
};
});
2.启用 （ 在Configure方法中 ）
app.UseAuthentication();//注意添加这一句，启用jwt验证
3.添加验证逻辑 ， 登陆成功就发放 token 。
public class HomeController : Controller
{
private IgbomContext _context;
private Common _common;
private readonly IConfiguration _configuration;
public HomeController(IgbomContext context, Common common, IConfiguration configuration)
{
_context = context;
_common = common;
_configuration = configuration;
}
//登录操作
[HttpPost]
public JsonResult login([FromForm] User model)
{
UserMsg msg = new UserMsg()
{
mark = 0,
msg = "",
token = "",
};
User user = _context.User.Where(x => x.name == model.name).FirstOrDefault();
string password_form = _common.Get_MD5_Method1(model.password);
if (user != null && user.password == password_form.ToLower())
{
JwtTokenUtil jwtTokenUtil = new JwtTokenUtil(_configuration);
string token = jwtTokenUtil.GetToken(user); //生成token
//var headers = new HttpResponseMessage().Headers;
//headers.Add("Authorization",token);
msg.mark = 1;
msg.msg = "登录成功";
msg.token = token;
}
else
{
msg.msg = "用户名或者密码错误";
}
return Json(msg);
}
}*/
/*
public class UserMsg {
//0是错误，1 是正确的
public int mark { get; set; }
public string msg { get; set; }
public string token { get; set; }
}*/
4 .创建JwtTokenUtil工具类，用于生成Jwt Token。
public class JwtTokenUtil
{
private readonly IConfiguration _configuration;
public JwtTokenUtil(IConfiguration configuration)
{
_configuration = configuration;
}
public string GetToken(User user)
{
// push the user’s name into a claim, so we can identify the user later on.
var claims = new[]
{
new Claim(ClaimTypes.Name, user.name),
//new Claim(ClaimTypes.Role, admin)//在这可以分配用户角色，比如管理员 、 vip会员 、 普通用户等
};
//sign the token using a secret key.This secret will be shared between your API and anything that needs to check that the token is legit.
var key = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(_configuration["SecurityKey"])); // 获取密钥
var creds = new SigningCredentials(key, SecurityAlgorithms.HmacSha256); //凭证 ，根据密钥生成
//.NET Core’s JwtSecurityToken class takes on the heavy lifting and actually creates the token.
/**
* Claims (Payload)
Claims 部分包含了一些跟这个 token 有关的重要信息。 JWT 标准规定了一些字段，下面节选一些字段:
iss: The issuer of the token，token 是给谁的 发送者
aud: 接收的
sub: The subject of the token，token 主题
exp: Expiration Time。 token 过期时间，Unix 时间戳格式
iat: Issued At。 token 创建时间， Unix 时间戳格式
jti: JWT ID。针对当前 token 的唯一标识
除了规定的字段外，可以包含其他任何 JSON 兼容的字段。
* */
var token = new JwtSecurityToken(
issuer: "igbom_web",
audience: "igbom_web",
claims: claims,
expires: DateTime.Now.AddMinutes(1),
signingCredentials: creds
);
return new JwtSecurityTokenHandler().WriteToken(token);
}
}
然后在前端使用token
5 . 可以通过Vuex管理token ， 在store.js添加token，
token: "",
6 . 在 index.js 中为axios的每个请求添加 headers，以便每次发送请求的时候都在 headers中携带token。
Vue.prototype.$http.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('token');
7 . 添加 全局路由守卫 ， 在每次路由发生变化的时候都判断本地 localStorage中是否有token。如果有，就路由跳转，没有就跳转到登陆页面。#<注意>：判断路由变化的时候注意防止 进入死循环
router.beforeEach((to, from, next) => {
if (localStorage.getItem('token') != '') {//store.state.token
console.log("333")
next()
}
else {
console.log("444")
if (to.path == '/userlogin' || to.path == '/login') {//如果是登录页面路径，就直接next()
next();
} else {//不然就跳转到登录；
//再用一个 if else判断，防止死循环
if (from.path.indexOf('/index') != -1) {
next('/userlogin');
}
else {
next('/login');
}
//next('/userlogin');
}
}
})
8 . 添加一个登陆页面，在login.vue中，发送表单数据，如果登陆成功，拿到token，就将token 存放到本地。
this.$http.post('/Home/login', formData).then(function (res) {
if (res.data.mark == 1 && res.data.token != '') {
//保存token到状态
that.$store.commit('changeToken', res.data.token); ///////提交状态
localStorage.setItem('token', res.data.token);//////token保存到localStorage
that.$http.defaults.headers.common['Authorization'] = 'Bearer ' + res.data.token;
//跳转到首页
that.$router.push({
path: '/index/energymanagement'
});
} else {
//错误提示
that.ruleForm2.errMsg = res.data.msg;
}
});
9.在普通页面中，每次发送api请求后返回结果的时候都要判断，如果token过期了，跳转到登陆页面重新登陆。
.catch(){}
如果每次发送api请求后返回结果的时候都要判断，那项目变大以后，很难维护，所以可以进行一些封装，
https://www.jianshu.com/p/671410da8f60
至此，一个完整的token使用过程大致完成。
要理解JWT的使用，首先要清楚后端token生成，前端发送请求携带token的过程，然后针对这个过程去了解每个部分的实现。
