vue token的实现

1、什么是Token
       Token是服务端生成的一串字符串,作为客户端进行请求时辨别客户身份的的一个令牌。当用户第一次登录后,服务器生成一个Token便将此Token返回给客户端。以后客户端的每次请求带上token,服务端就能辨别是哪一个用户。
       也可以将token比喻成一把钥匙,每当用户来访问服务器的时候就带上这把钥匙,然后去解服务器上的锁。如果锁解开了,那么用户就是登陆了,如果锁解不开,那么则提示用户未登录或登录已经失效。

2、token的应用流程
       1)用户第一次登录时,向服务器发起请求。服务器根据账号和密码判断是否登录成功,如果是首次登录,服务器会生成一个新的token,并保存到数据库,数据库中存储了每个用户对应的token。最后服务器会把这个token返回给客户端。
       2)用户登录成功后,客户端将接收到的token存储到浏览器(localStorage或者sessionStorage)和vuex上。
       3)设置请求头,将token放在请求头上,并让客户端的每次请求都带上token。
       4)用户的每次请求,服务器都能根据token辨别出是哪个用户。每个用户都有一个不同的token。当然,为了再安全一点,我们还可以让用户每次把钥匙(token)发给我们的时候,再给他一把新钥匙(token),也就是说钥匙(token)只能使用一次,被劫持了咱也不怕。


3、代码实现

1)使用node.js搭建的服务器上处理登录请求,并返回token。token的生成是由后端生成的,这里就不深入到token的生成了。

//模拟admin该用户第一次登录时,返回一个新的token
router.post('/login',function (request,response){
    if(userName == 'admin' && userPwd == '123'){        //当账号密码正确
  		//token的生成需要引入一个可以生成token的库jsonwebtokens,这里只是模拟,就不生成了,直接给一个死数据
        let token = 'werty1234';   
        response.send({code:200,data:token})
    }else {
        response.send({code:400,msg:'账号或密码不正确'})
    }
})

2)在vuex上做处理,将接收到的token存储到state和浏览器中

store/index.js

export default new Vuex.Store({
  state: {
  	token: sessionStorage.getItem('token') ? sessionStorage.getItem('token') : ''
  },
  mutations: {
  //登录成功,存储信息到浏览器和state中
  	loginSuccess(state, data) { 
        state.token= data.token;
        sessionStorage.setItem('token', state.token);
    }
  },
  actions: {
  	 loginSuccess({commit}, data) {
        commit('loginSuccess', data)
    }
  }
})

3)设置请求头

main.js

//设置请求头
Axios.defaults.headers.common['token'] = store.state.token;

//每次发起请求时,判断是否有token,有则带上token
Axios.interceptors.request.use(
    config => {
      if(sessionStorage.getItem('token')){
        config.headers.common['token'] = sessionStorage.getItem('token');
      }
      return config;
    },
    error => {
      return Promise.reject(error);
    }
);

4)登录成功,存储token

this.$axios.post('服务器接口ip:端口/login',{
          userName:this.loginForm.username,
          userPwd:this.loginForm.pwd
      }).then(res=>{       
          if(res.data.code == 200){            //状态码为200,表示登录成功             
		       var token = res.data.data;
		       // 将接收到的token存储到vuex中
		       this.$store.dispatch('loginSuccess',{token:token});       
		       //跳转其他页面    
		       this.$router.push('/index').catch(err=>{
		           console.log(err)
        });
    }else{
        this.$message.error(res.data.msg);
    }
}).catch(err=>{
    this.$message.error(err);
})
      

当用户登录成功后,已经完成了token的存储和请求头的设置。当该用户再向服务器发起请求后,都会带上这个token。服务器根据token识别用户身份,再对该用户的请求作出响应。

5)最后也可以设置一个全局守卫,通过判断浏览器是否存储了token来判断用户是否登录。没有则跳到登录界面

main.js

//路由拦截
router.beforeEach((to,from,next)=>{
  if(to.name == 'login'){         //如果是进入登录界面
    next();
  }else{         //进入其他页面
    let token = sessionStorage.getItem('token');
    if(token == '' || token == null){
      next('/login');        
    }else{
      next();
    }
  }
});
相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页