技能学习:学习使用golang(gin框架) + vue.js,开发前端全栈网站-9.登...-技术圈

技能学习：学习使用golang（gin框架） + vue.js，开发前端全栈网站-9.登录功能（三）：登录的token验证

相关文章：
技能学习：学习使用golang（gin框架） + vue.js，开发前端全栈网站-1.工具和本地环境
…
技能学习：学习使用golang（gin框架） + vue.js，开发前端全栈网站-8.模型的关联——无限层级分类
技能学习：学习使用golang（gin框架） + vue.js，开发前端全栈网站-9.登录功能（一）：管理员功能的实现
技能学习：学习使用golang（gin框架） + vue.js，开发前端全栈网站-9.登录功能（二）：用户登录和密码验证
技能学习：学习使用golang（gin框架） + vue.js，开发前端全栈网站-9.登录功能（三）：登录的token验证
技能学习：学习使用golang（gin框架） + vue.js，开发前端全栈网站-10.生产环境编译
…

1.生成token

go语言中生成token的方法被封装在了jwt中，gin框架使用jwt又进行了进一步封装，在"github.com/dgrijalva/jwt-go"里。
（1）安装jwt包：jwt-go

go get github.com/dgrijalva/jwt-go

（2）编写生成token方法

// 定义一个全局token密钥，token密钥随意定义一串字符串
var jwtkey = []byte("lskjdghfhkagflkagh")
// 定义字符串格式token，方便之后token的转化
var tokenString string

// 定义一个token模型，用于存放token信息，识别不同账号
type claims struct {
    UserId string
   jwt.StandardClaims
}

// 生成token
// 传入字符串格式用户id，输出字符串格式的token和错误值
func setToken(id string) (tokenString string, err error) {
// 
// 定义token过期时间，一天后过期
   expireTime := time.Now().Add(1 * 24 * time.Hour)
    claims := &claims{
      UserId: id,
      StandardClaims: jwt.StandardClaims{
           ExpiresAt: expireTime.Unix(), // 过期时间，用上方定义的过期时间
            IssuedAt: time.Now().Unix(), // 生效时间，生成token的这一刻起
           Issuer: "127.0.0.1", // 生成者，本域名
          Subject: "user token", // 生成主题
},
}
// 生成token
 token := jwt.NewWithClaims(jwt.SigningMethodHS256, claims)
// 根据之前定义的密钥，将token转化为加密字符串
    tokenString, err = token.SignedString(jwtkey)
// 输出
return
}

（2）编辑登录接口方法，在其中使用token方法获取token值

编译启动，测试：

成功获取token值。
（3）最后将token值保存到前端本地储存空间中，用于验证登录状态：
Login.vue：

async login() {
const res = await this.$http.post('login', this.model)
    console.log(res)

// 存储token值
// sessionStorage是页面缓存存储，关闭页面后token值被清除，每次进入页面都需要进行账号登陆
// localStorage是本地存储，关闭页面后token值不会被清除，只要不清理浏览器缓存就无需再次进行登录操作
    localStorage.token = res.data.token

// 登录成功跳转到网站首页
this.$router.push('/')
// 使用vue效果在页面展示结果
this.$message({
        type: 'success',
        message: '登陆成功'
})
}

保存测试，跳转成功：

查找页面存储的token，可查询到：

2.验证token

我们需要将token值存入发送请求的请求头中，做到只要调用接口，就可以将token一并发送到后端，从而对token登陆状态进行比对验证。
（1）前端admin端通过请求头将token传值给后端
在http.js中全局设置获取token，将token值传入请求头Request
Headers中，然后后台接口中直接从请求头中获取token，从而实现验证。
这里使用axios里的Interceptors方法，详细可查阅axios手册：

admin/http.js前端admin端将token传入请求头Request Header：

// 使用axios的interceptors拦截器，将http调用时拦截
http.interceptors.request.use(function(config){
// 将token值传入请求头，"bearer + 空格"是代码规范，看到Bearer(持票人)大家就明白是对token的验证
    config.headers.Authorization = 'bearer ' + localStorage.token
return config
}, function(error){
// 错误处理
return Promise.reject(error)
})

此时调用接口就可以将本地token传给请求头，测试：

（2）后端获取请求头中的token值，并解析token

// 解析token
func getToken() gin.HandlerFunc {
return func(ctx *gin.Context) {
// 从请求头获取token值
        tokenString := ctx.GetHeader("Authorization")

// 判断如果没有token
if tokenString == "" {
          ctx.JSON(http.StatusUnauthorized, gin.H{"code": 401, "msg": "您未登录"})
// 中间件中使用next()就执行下一步，如果执行abort()就不会执行下一步
            ctx.Abort()
// return
}

// 去除authorization中的"bearer"
     tokenString = strings.Trim(tokenString, "bearer")
// 去除authorization中的空格
      tokenString = strings.Replace(tokenString, " ", "", -1)
      fmt.Println(tokenString)

// 判断token是否失效
      token, claims, err := ParseToken(tokenString)
if err != nil || !token.Valid{
         ctx.JSON(http.StatusUnauthorized, gin.H{"code": 401, "msg": "权限失效，请重新登录"})
         ctx.Abort()
// return
}

// 打印userid，既然定义这个值就必须使用，留下来以备以后的需要
      fmt.Println(claims.UserId)
if claims.UserId != "" {
// 如果没有token没问题，则退出中间件执行下一步
          ctx.Next()
}
}

}
// 解析字符串token中的信息
func ParseToken(tokenString string) (*jwt.Token, *claims, error) {
    claims := &claims{}
    token, err := jwt.ParseWithClaims(tokenString, claims, func(token *jwt.Token) (i interface{}, err error) {
return jwtkey, nil
})
return token, claims, err
}

此时，删除本地token：

刷新页面，进行token判断：

此时接口无法调用，这里是因为我们删除了本地存储的token，如果本地有token，但仍然错误，就是因为之前token设定的时间过期了：

同时报错中显示为空白，我们需要让它显示出来报错原因，修改两处：
（1）将报错返回的json值return返回：

（2）修改前端页面的vue拦截信息，我们返回的错误是msg：

此时再次刷新页面：

既然报错，则跳转到登陆页面：

刷新页面，此时跳转到登录页面：

登录进入页面测试，无法登录：

这事因为我们的token判断中间件，同样作用于login接口，所以需要进行改动后端接口路由：

将登录接口放在token解析中间件上方，中间件就不会对登录接口作用了，只会作用于下方接口，保存编译测试：

到此，登录的token解析功能实现。