ASP.NET Core 2.1 JWT Token 使用 （二） - 简书

原文:ASP.NET Core 2.1 JWT Token 使用 （二） - 简书

接上文，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的过程，然后针对这个过程去了解每个部分的实现。