今天练习token登录认证，发现网上查的资料大多都看不懂，然后自己琢磨了半天勉强实现了这个功能，记录一下，博主是小白，大伙勿喷……

        首先我们的前端发送一个http请求给后端,一般登录验证为POST请求,这里使用fetch方法来发起请求,具体fetch的用法可以自行上网查，原理跟axios相差不大：

    const handleLogin = () => {
      let url='api/user/login';
      fetch(url,{
        method: 'POST', 
        mode: 'cors',
        cache: 'no-cache',
        credentials: 'same-origin',
        headers: new Headers({
          'Content-Type': 'application/json',
        }),
        redirect: 'follow',
        body: JSON.stringify(formData)
      }).then((v)=>{
        return v.json();  //用json序列化函数处理响应的数据
      }).then((v)=>{
        //如果该响应的结果为空
        if(!v){
          message.error("null respone!")
        }
       if(v.status===2005){
         message.error(v.msg);
         return
       }else if(v.status===200||v.status===201){
         message.success("进入聊天室成功")
        //  console.log(v.data.token)
         localStorage.setItem("token",v.data.token);
         setTimeout(() => {
           routers.push('/chat')
         }, 1500);
       }
      }).catch((err) => {
          // console.log(err);
          message.error(err);
        });
    };

PS：上面的body中是携带了username和password，最后使用JSON.stringify()函数转化为json字符串传给后端

当请求成功后，后端会返回一个token，我们需要将token通过localStorage对象存储在本地浏览器中

localStorage.setItem("token",v.data.token);

             

 此时前端就拿到了token,之后便可以使用这个token去完成相应的路由守卫和请求拦截了。

 不过我们先来看看后端是如何生成token的:

首先这里直接先给出整个Login函数的处理：

//用户登录
func Login(w http.ResponseWriter, r *http.Request) {
	var err error
	//msg用于响应客户端，，msg.data里存放着用户信息
	msg := define.ReplyProto{
		Status: 200,
		Msg:    "success",
	}
	//如果不是请求方法不是post
	if strings.ToLower(r.Method) != "post" {
		msg.Status = -400
		msg.Msg = "invalid request,should be post"
		respone.Resp(w, &msg)
		return
	}
	//buf接收请求发送过来的用户信息
	buf, err := ioutil.ReadAll(r.Body)
	if err != nil {
		msg.Status = -403
		msg.Msg = err.Error()
		return
	}
	//如果请求的参数为空
	if buf == nil {
		msg.Status = -500
		msg.Msg = "invalid/nil request param"
		return
	}
	jsonMap := make(map[string]interface{})
	err = json.Unmarshal(buf, &jsonMap)
	if err != nil {
		fmt.Println("1:" + err.Error())
	}
	//获取用户名和密码
	username := jsonMap["username"]
	password := jsonMap["password"]
	//如果用户名或密码为空
	if username == "" || password == "" {
		msg.Status = -500
		msg.Msg = "invalid/empty user/password"
		respone.Resp(w, &msg)
		return
	}
	//连接数据库比对用户名和密码
	s := `select id,username from t_user where username = $1 and password=crypt($2,password) `

	var userID int
	result := dao.DB.QueryRow(context.Background(), s, username, password)
	err = result.Scan(&userID, &username)
	nonexistent := err == pgx.ErrNoRows
	//密码错误或者用户不存在
	if nonexistent {
		msg.Status = 2005
		msg.Msg = "用户名/密码错误,请重新登录！"
		respone.Resp(w, &msg)
		return
	}
	//创建token
	token, err := createToken(userID, username)
	if err != nil {
		msg.Status = 501
		msg.Msg = "生成token失败！"
		respone.Resp(w, &msg)
		return
	}
	msg.Data = []byte(fmt.Sprintf(`
    {"id":%d,"username":"%s","token":"%s"}`, userID, username, token))
	//响应客户端
	respone.Resp(w, &msg)
	return
}

具体的封装函数就不细追究，我们只需要关注一下如何生成token即可，登录成功后我们可以得到username和userid(password出于安全，我们一般是不操作这个数据的)，这里的userid是用户注册时会生成的，我这里只要在查询数据库比对密码的时候返回一下userid和username即可(具体看每个人的思路是如何的)，而这两个数据是可以拿来生成token的，此时我们就可以引进jwt包

import "github.com/dgrijalva/jwt-go"

封装一个CreateToken的函数，参数为username和userid来生成token

//自定义令牌
var mySigningKey = []byte("Key of Chery")

//创建token
func createToken(userid int, username interface{}) (s string, err error) {

	// Create the Claims
	claims := MyClaim{
		Username: username,
		Id:       userid,
		StandardClaims: jwt.StandardClaims{
			NotBefore: time.Now().Unix() - 60,    //生效时间，这里是一分钟前生效
			ExpiresAt: time.Now().Unix() + 60*60, //过期时间，这里是一小时过期
			Issuer:    "chery",                   //签发人
		},
	}
	//SigningMethodHS256,HS256对称加密方式
	token := jwt.NewWithClaims(jwt.SigningMethodHS256, claims)
	//通过自定义令牌加密
	ss, err := token.SignedString(mySigningKey)
	if err != nil {
		fmt.Println("生成token失败")
	}
	return ss, err
}

查看官方文档，我们可以使用jwt.NewWithClaims()函数来生成token,参数中claims是一个结构体（因此我们可以自定义自己的claims结构体，我上面定义的是MyClaims），而结构体里的jwt.StandardClaims{}类型则是定义token的规则，如过期时间，签发人，生效时间等……（因为token存在被盗的风险，因此建议有效时间设置短一些）

源码中给出的结构：

type StandardClaims struct {
	Audience  string `json:"aud,omitempty"`
	ExpiresAt int64  `json:"exp,omitempty"`
	Id        string `json:"jti,omitempty"`
	IssuedAt  int64  `json:"iat,omitempty"`
	Issuer    string `json:"iss,omitempty"`
	NotBefore int64  `json:"nbf,omitempty"`
	Subject   string `json:"sub,omitempty"`
}

 这里解释各个字段的意义：

  • 发行人：iss
  • 到期时间：exp
  • 主题：sub
  • 受众：aud
  • 编号：jti
  • 生效时间：nbf
  • 有效时间：exp
  • 签发时间：iat

第一个参数是指定一个加密方法，最后这个函数会返回一个Token的结构体，

func NewWithClaims(method SigningMethod, claims Claims) *Token {
   return &Token{
      Header: map[string]interface{}{
         "typ": "JWT",
         "alg": method.Alg(),
      },
      Claims: claims,
      Method: method,
   }
}

最后通过SignedString()函数使用我们自己定义的唯一令牌去生成token字符串，这个token就可以返回给前端了

func (t *Token) SignedString(key interface{}) (string, error) {
	var sig, sstr string
	var err error
	if sstr, err = t.SigningString(); err != nil {
		return "", err
	}
	if sig, err = t.Method.Sign(sstr, key); err != nil {
		return "", err
	}
	return strings.Join([]string{sstr, sig}, "."), nil
}

核心代码就只有几行罢了

        到这里我们的token是如何生成的就搞清楚了，那么接下来回到前端，我们需要设置一下路由守卫，和如何将每个请求都带上token：

        这里就简单的判断本地浏览器有无token，如果没有就说明一定没有登录，跳回到登录页。如果token存在则放行。但是这样做还不够，试想一下，如果有人知道我们的api接口和参数，是不是就可以直接使用postman等工具就可以把获得我们后端的数据了呢？因此前端需要在每次请求中都带上token，而后端则会再检验这个token的合法性，从而判断该请求是否合法……

//路由守卫
router.beforeEach((to,from,next)=>{
  console.log(to.name)
  let token=localStorage.getItem('token');
  //如果token存在则放行
  if(token){
    next();
  }else{
    if(to.name==='login'||to.name==='register'){
      next()
    }else{
      next('/login')
    }
  }
})

让每次请求都带上token有两种方法，一种是放到cookie中，另一种则是放在请求头header里，这里我们使用第二种方法，第一种方法有兴趣可以自行查找资料（这种方法没有第二种安全，容易被CSRF（跨站请求伪造）攻击）:

很简单，只需要在请求前先获取本地的token，如果没有token则让用户重新登录，如果有，则添加进请求头里：

     let token=localStorage.getItem('token');
     if(!token){
       message.warning("身份已过期，请重新登录!")
       routers.push('/login');
       return
     }else{
       let url='/api/user/userList';
       fetch(url,{
        method: 'GET',
        mode: 'cors',
        cache: 'no-cache',
        credentials: 'same-origin',
        headers: new Headers({
          'Content-Type': 'application/json',
          'Authorization':'Bearer '+token,
        }),
        redirect: 'follow',   
       }).then((v)=>{
         return v.json()
       }).then((v)=>{
          if(!v){
            message.info("null respone!")
            return;
          }
          if(v.status===401||v.status===402){
            message.error("身份已过期,请重新登录!")
            routers.push('/login');
            return
          }else if(v.status===200||v.status===201){
              this.userList=v.data;
              console.log(this.userList);
          }
       }).catch((err)=>{
         console.log(err);
         message.error("系统错误!");
       })
     }

核心就是在请求头里添加一个Authorization字段来存放token，一般我们会再拼接一个"Bearer "字符串在前面。

 headers: new Headers({
          'Content-Type': 'application/json',
          'Authorization':'Bearer '+token,
        }),

axois同理：

axios.get(url, 
    {
        headers: {
            'Authorization': 'Bearer ' + token,
        },
        params: {
            ……
        }
    }
)

 这样我们的后端就能获得这个token了，那么后端要如何验证这个token是否合法呢？

这里的处理方法也十分简单，就是直接通过request.Header即可获得请求头了，而header是一个map[string] []string类型的map，因此直接取就可以了，最后除去"Bearer "，即我们想要的token了，注意这里我们还需要判断token的长度是否小于或等于7，如果是的话证明只有"Bearer "或者是非法的token,为了避免我们下面截取字符串的操作不会发生越界，因此这个很重要！

    var err error
	//连接成功
	msg := define.ReplyProto{
		Status: 0,
		Msg:    "success",
	}
	//从请求头中获取token
	header := r.Header
	//如果token为空
	if header["Authorization"] == nil {
		msg.Status = 402
		msg.Msg = "token为空"
		respone.Resp(w, &msg)
		return
	}
	//获得想要的token部分
	token := header["Authorization"][0]
	if len(token)<=7{
		msg.Status = 402
		msg.Msg = "非法token"
		respone.Resp(w, &msg)
		return
	}
	token = token[7:]
	//验证token是否合法和过期
	err = user.ConfirmToken(token)
	if err != nil {
		msg.Status = 401
		msg.Msg = "token过期或者为非法token"
		respone.Resp(w, &msg)
		return
	}

这里我们就可以再封装一个检验token的ConfirmToken函数了，根据官方文档，我们可以使用jwt.ParseWithClaims函数去解析，需要传入一个token字符串，和我们自定义的MyClaims结构体的空接口实现以及一个keyfun()函数，需要我们去返回一个我们自定义的令牌。这个函数最后会返回一个Token结构体,通过断言即可获得我们想要的参数，从而可以使用这些参数去进行进一步的验证和使用：

func ConfirmToken(token string) (err error) {
	Token, err := jwt.ParseWithClaims(token, &MyClaim{}, func(token *jwt.Token) (interface{}, error) {
		return mySigningKey, nil
	})
	if err != nil {
		fmt.Println(err.Error())
		return err
	}
	fmt.Println(Token.Claims.(*MyClaim).Username)
	fmt.Println(Token.Claims.(*MyClaim).Id)
	return err
}

 如果token是非法的或者是过期的，则会返回一个err，打印出来就类似于我下面那个token is expired by 55m39s，意思就是这个token已经过期了

 OK，到这里就基本完成了整个前后端分离的token验证啦！如果想要了解得更深入，可以自行去查看下源码

# golang # vue.js
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue