接上文，http://www.itdecent.cn/p/c5f9ea3b4b65 ASP.NET Core 2.1 JWT Token （一）。
如下演示在項目中的 簡單 的 實(shí)際使用方式：
在后端生成token
1.在Startup.cs中配置 服務(wù) ，添加jwt 驗證 服務(wù)添加服務(wù) ( 在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，這兩項和前面簽發(fā)jwt的設(shè)置一致
IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(Configuration["SecurityKey"]))//拿到SecurityKey
};
});
2.啟用 （ 在Configure方法中 ）
app.UseAuthentication();//注意添加這一句，啟用jwt驗證
3.添加驗證邏輯 ， 登陸成功就發(fā)放 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 .創(chuàng)建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); //憑證 ，根據(jù)密鑰生成
//.NET Core’s JwtSecurityToken class takes on the heavy lifting and actually creates the token.
/**
* Claims (Payload)
Claims 部分包含了一些跟這個 token 有關(guān)的重要信息。 JWT 標(biāo)準(zhǔn)規(guī)定了一些字段，下面節(jié)選一些字段:
iss: The issuer of the token，token 是給誰的 發(fā)送者
aud: 接收的
sub: The subject of the token，token 主題
exp: Expiration Time。 token 過期時間，Unix 時間戳格式
iat: Issued At。 token 創(chuàng)建時間， Unix 時間戳格式
jti: JWT ID。針對當(dāng)前 token 的唯一標(biāo)識
除了規(guī)定的字段外，可以包含其他任何 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，以便每次發(fā)送請求的時候都在 headers中攜帶token。
Vue.prototype.$http.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('token');
7 . 添加 全局路由守衛(wèi) ， 在每次路由發(fā)生變化的時候都判斷本地 localStorage中是否有token。如果有，就路由跳轉(zhuǎn)，沒有就跳轉(zhuǎn)到登陸頁面。#<注意>：判斷路由變化的時候注意防止 進(jìn)入死循環(huán)
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 {//不然就跳轉(zhuǎn)到登錄；
//再用一個 if else判斷，防止死循環(huán)
if (from.path.indexOf('/index') != -1) {
next('/userlogin');
}
else {
next('/login');
}
//next('/userlogin');
}
}
})
8 . 添加一個登陸頁面，在login.vue中，發(fā)送表單數(shù)據(jù)，如果登陸成功，拿到token，就將token 存放到本地。
this.$http.post('/Home/login', formData).then(function (res) {
if (res.data.mark == 1 && res.data.token != '') {
//保存token到狀態(tài)
that.$store.commit('changeToken', res.data.token); ///////提交狀態(tài)
localStorage.setItem('token', res.data.token);//////token保存到localStorage
that.$http.defaults.headers.common['Authorization'] = 'Bearer ' + res.data.token;
//跳轉(zhuǎn)到首頁
that.$router.push({
path: '/index/energymanagement'
});
} else {
//錯誤提示
that.ruleForm2.errMsg = res.data.msg;
}
});
9.在普通頁面中，每次發(fā)送api請求后返回結(jié)果的時候都要判斷，如果token過期了，跳轉(zhuǎn)到登陸頁面重新登陸。
.catch(){}
如果每次發(fā)送api請求后返回結(jié)果的時候都要判斷，那項目變大以后，很難維護(hù)，所以可以進(jìn)行一些封裝，
http://www.itdecent.cn/p/671410da8f60
至此，一個完整的token使用過程大致完成。
要理解JWT的使用，首先要清楚后端token生成，前端發(fā)送請求攜帶token的過程，然后針對這個過程去了解每個部分的實(shí)現(xiàn)。
