项目中的鉴权是如何实现的？

港控/mmm° 2022-12-08 04:15 95阅读 0赞

### 一、token 验证登录流程 ###

使用基于 Token 的身份验证方法，大概的流程是这样的：

1.  客户端使用用户名跟密码请求登录
2.  服务端收到请求，去验证用户名与密码
3.  验证成功后，服务端会签发一个 Token，再把这个 Token 发送给客户端
4.  客户端收到 Token 以后可以把它存储起来，比如放在 Cookie 里或者 Local Storage 里
5.  客户端每次向服务端请求资源的时候需要带着服务端签发的 Token
6.  服务端收到请求，然后去验证客户端请求里面带着的 Token，如果验证成功，就向客户端返回请求的数据

总的来说就是客户端在首次登陆以后，服务端再次接收http请求的时候，就只认token了，请求只要每次把token带上就行了，服务器端会拦截所有的请求，然后校验token的合法性，合法就放行，不合法就返回401（鉴权失败）。

### 二、最常用的鉴权是 JWT方案（JSON WEB TOKEN） ###

**JWT是什么？**

JWT是Auth0提出的通过对JSON进行加密签名来实现授权验证的方案。就是登陆成功后将相关信息组成json对象，然后对这个对象进行某中方式的加密，返回给客户端，客户端在下次请求时带上这个token，服务端再收到请求时校验token合法性，其实也就是在校验请求的合法性。

**JWT对象通常由三部分构成：**

Headers： 包括类别（typ）、加密算法（alg）

{ 
      "alg": "HS256",
      "typ": "JWT"
    }

Claims ：包括需要传递的用户信息

{ 
          "sub": "1234567890",
          "name": "John Doe",
          "admin": true
        }

Signature： 根据alg算法与私有秘钥进行加密得到的签名字串， 这一段是最重要的敏感信息，只能在服务端解密；

HMACSHA256(  
        base64UrlEncode(Headers) + "." +
        base64UrlEncode(Claims),
        SECREATE_KEY
    )

编码之后的JWT看起来是这样的一串字符：

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWV9.TJVA95OrM7E2cBab30RMHrHDcEfxjoYZgeFONFh7HgQ

### 三、 后端设计：nodejs+express+jwt-simple ###

#### auth.js ####

### server.js ###

上面只是一个简单的token生成和校验，如果有需要可以根据实际需要进行逻辑处理

### 四、前端设计 ###

**使用vuex保存全局状态，并做数据持久化**  
vuex里面面定义token变量来表示用户是否登录，初始值为’’

import createPersistedState from 'vuex-persistedstate'
    
    export default new Vuex.Store({ 
    	  state: { 
    	    token: '',
    	  },
    	  mutations: { 
    	    setIsLogin(state, isLogin) {   //登录成功调用
    	      state.token = isLogin;
    	    },
    	    FedLogOut(state) {         //退出登陆执行
    	      state.token=''
    	    }
    	  }
        actions,
        getters,
        plugins:[createPersistedState({   //vuex数据固化到本地缓存，数据持久化
            storage: window.localStorage
        })] 
    });

###### 配置request请求拦截器 ######

request请求拦截器：发送请求前统一处理，如：设置请求头headers、应用的版本号、终端类型等。

service.interceptors.request.use(
      config => { 
        if (store.state.token) { 
         // 为请求头对象，添加token验证的Authorization字段
         config.headers.Authorization = store.state.token;     
        }
            return config
      },
      error => { 
        // do something with request error
        console.log(error) // for debug
        return Promise.reject(error)
      }
    )

##### response响应拦截器 #####

response响应拦截器：有时候我们要根据响应的状态码来进行下一步操作，例如：由于当前的token过期，接口返回401未授权，那我们就要进行重新登录的操作。

service.interceptors.response.use(
      response => { 
        Toast.clear()
        const res = response.data
        if (res.status && res.status !== 200) { 
          // 登录超时,token过期返回401，重新登录
          if (res.status === 401) {  
            store.dispatch('FedLogOut').then(() => { 
                    router.replace({ 
                    path: '/login'
                    //登录成功后跳入浏览的当前页面
                    // query: {redirect: router.currentRoute.fullPath}
                })
            })
          }
          return Promise.reject(res || 'error')
        } else { 
          return Promise.resolve(res)
        }
      },
      error => { 
        Toast.clear()
        console.log('err' + error) // for debug
        return Promise.reject(error)
      }
    )