精华内容
下载资源
问答
  • vue获取token 实现token登录

    千次阅读 2020-12-04 09:43:09
    vue实现token用户登录 使用token登录验证的思路大致如下: 1、在第一次登录的时候前端调用后端的接口,把用户名和密码传给后端。 2、后端收到请求,验证用户名和密码,验证成功后,返回给前端一个token值。 3、...

    vue实现token用户登录

    使用token做登录验证的思路大致如下:

    1、在第一次登录的时候前端调用后端的接口,把用户名和密码传给后端。

    2、后端收到请求,验证用户名和密码,验证成功后,返回给前端一个token值。

    3、前端收到后端传给的token值,将token存储在本地 loaclStorage和vuex中。(本次项目用的是vue框架,使用了vuex全局状态管理)

    4、前端每次路由跳转,就判断localStorage中是否有token,如果没有就跳转登录页面,如果有就跳转到相应的页面。

    5、分装一公用的请求接口方法,每次请求调用后端接口,都在请求头中带上token

    6、后端判断请求头中是否有token,如果有token就拿到token并且验证token,验证成功返回数据,验证失败(例如token过期),就返回给前端一个状态码,一般是401,请求头中没有token也返回401 (第6步是后端做,前端只要根据后端返回都状态做相应都处理就行了)

    7、如果前端拿到后台返回都状态码是401,就清除token并跳转登录页面。

    实际步骤

    1、在项目中store中都store.js文件里添加保存和删除token都全局方法。

    //  store.js 中都mutation中增加添加和删除token的方法
    import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex)
    
    const state = {     // 全局管理的数据存储
    	 isLogin:'0',
    	 ser:null,
    	 token:localStorage.getItem('token') ? localStorage.getItem('token'):'',   // token
    };
    export default new Vuex.Store({
    	state,
    	getters:{    // 监听数据变化的
    		getStorage(state){   // 获取本地存储的登录信息
    	      if(!state.token){
    	        state.token =JSON.parse(localStorage.getItem(key))
    	      }
    	      return state.token
    	    }
    	},
    	mutations:{
    		$_setToken(state, value) { // 设置存储token
    	        state.token = value;
    	        localStorage.setItem('token', value);
    	    },
    	    $_removeStorage(state, value){  // 删除token
    		      localStorage.removeItem('token');
    	    },
    	}
    })
    

    2、在登录页面(login.vue)中登录方法调用接口成功后把token存储在本地存储中localStorage。

    // login.vue页面
    methods:{
    	loginFun(){
    		this.$api.post('请求的后端接口链接',{
    				data:{
    					userId:this.user,   // 登录名
    		            userPwd:this.psw,  // 登录密码
    				}
    		}).then((res) => {
    			if(res.data.status == 200){
    				var userInfo = res.data.data;
    				this.$store.commit('$_setToken', userInfo.token);
    				Toast({ message: '登录成功', type: 'success',duration: 1500});   // ui弹窗提示
                     this.$router.push({ name:'homePage' })// 跳转到首页
    			} else {
    				Toast({ message: res.data.message, duration: 1500});   // ui弹窗提示
    			}
    		})
    	}
    }
    

    3、在main.js中添加请求拦截器,并在请求头中添加token。

    import Vue from 'vue'
    import App from './App.vue'
    import router from './router/router'
    import store from './store/store'
    
    import PublicFun from './utils/publicFun'    // 公用方法
    
    import './mintUi'   // 按需引入mintUi 组建   如需配置到mintUi.js去配置
    import '@/assets/mui/css/mui.css' // mui.css样式
    
    /*引入axios插件*/
    import axios from 'axios'
    Vue.prototype.$http = axios;
    
    // 全局路由构造函数,判断是否登录和要跳转到页面
    router.beforeEach((to, from, next) => {
      if (to.matched.some(m => m.meta.requireAuth)) {    // 需要登录
        if(window.localStorage.token && window.localStorage.isLogin === '1'){
          next()
        } else if (to.path !== '/login') {
          let token = window.localStorage.token;
          if (token === 'null' || token === '' || token === undefined){
              next({path: '/login'})
              Toast({ message: '检测到您还未登录,请登录后操作!', duration: 1500 })
          }
        } else {
          next()
        }
      } else {   // 不需要登录
        next()
      }
    })
    
    
    
    // 配置公共url
    Axios.defaults.baseURL = "http://www.sinya.online/api/"
    //添加请求拦截器
    axios.interceptors.request.use(
      config =>{
        if(store.state.token){
          config.headers.common['token'] =store.state.token
        }
        return config;
      },
      error =>{
        //对请求错误做什么
        return Promise.reject(error);
      })
    
    //http reponse响应拦截器
    axios.interceptors.response.use(
      response =>{
        return response;
      },
      error=>{
        if(error.response){
          switch(error.response.status){
            case 401:
              localStorage.removeItem('token');
              router.replace({
                path: '/views/login',
                query: {redirect: router.currentRoute.fullPath}//登录成功后跳入浏览的当前页面
              })
          }
        }
      })
    
    Vue.prototype.$publicFun = PublicFun   // 挂载全局公用方法
    Vue.prototype.$apps = Apps    //  app.js公用方法
    Vue.config.productionTip = false
    
    new Vue({
      router,
      store,
      render: h => h(App)
    }).$mount('#app')
    

    看到token
    在这里插入图片描述

    退出的时候

    returnFun(){   // 退出登录
    	 MessageBox.confirm(this.lang.logoutTip).then(action => {
    	     this.$store.commit('$_removeStorage');    // 清除登录信息
    	     this.$router.push({
    	         name:'login'
    	     });
    	     Toast({message:this.lang.logoutSuccess, duration: 1500});
    	 }).catch(()=>{})
    }
    
    展开全文
  • VUE实现token登录

    2020-04-03 19:24:27
    VUE实现token操作全过程

    VUE实现token登录

    Web Storage实际上由两部分组成:sessionStorage与localStorage。
    sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。关闭网页,浏览器都会清空sessionStorage。
    localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。
    本篇使用localStorage进行演示

    一、存储token

    在获得后台返回的token后,将其放入localStorager中:

    localStorage.setItem('token', token)
    

    二、在请求头中添加token

    在 main.js中添加拦截器,为每个接口添加token,这样后端就能辨认你是否登录了

    axios.interceptors.request.use(
      config => {
      // 判断是否存在token,如果存在的话,则每个http header都加上token
        if (localStorage.token) {
          config.headers.Authorization = localStorage.token
        }
        return config
      }
      })
    

    三、判断用户是否是登录状态

    如果localStorager中没有token,那么我们在第二部的时候就会出现问题。
    这时候,就需要根据localStorager中的token存在与否,判断是否是登录状态:
    是登录状态,就继续;如果不是登录状态,返回登录页。

    router.beforeEach((to, from, next) => {
      // console.log(to) // 即将要进入路由的对象
      // console.log(from) // 当前导航要离开的路由对象
      // console.log(next) // 调用next该方法,才能进入下一个路由
      // 1. 判断是不是登录或者注册页面
      // 是登录或者注册页面
      if (to.path === '/' || to.path === '/register') {
        next()
      } else {
        // 不是登录页面
        // 2. 判断 是否登录过
        let token = window.localStorage.token
        token ? next() : next({path: '/'})
      }
    })
    

    四、清空token

    能根据localStorager中的token存在与否,判断是否是登录状态,是有前提的。
    这个前提就是,在退出登录的时,及时清空token。
    除了在 登出 按钮的方法中加上 localStorage.clear() 清空localStorage外,还需要获取用户关闭网页和关闭浏览器的动作。
    可以在App.js中,加上下面的代码:

    mounted () {
        // 关闭浏览器窗口的时候清空浏览器缓存在localStorage的数据
        window.addEventListener('beforeunload', e => {
          localStorage.clear()
        })
      }
    

    通过以上的几点,我们就能完整的判断用户的登录状态了。

    如果token过期,可以通过和后端约定的错误码进行提示,让用户重新登录;
    也可以在前端设置定时器,当用户长时间没有操作的时候,跳转到登录页;

    展开全文
  • 在前后端完全分离的情况下,Vue项目中实现token验证大致思路如下: 1、第一次登录的时候,前端调后端的登陆接口,发送用户名和密码 2、后端收到请求,验证用户名和密码,验证成功,就给前端返回一个token 3、前端...

    0.写在前面

    在前后端完全分离的情况下,Vue项目中实现token验证大致思路如下:

    1、第一次登录的时候,前端调后端的登陆接口,发送用户名和密码

    2、后端收到请求,验证用户名和密码,验证成功,就给前端返回一个token

    3、前端拿到token,将token存储到localStorage和vuex中,并跳转路由页面

    4、前端每次跳转路由,就判断 localStroage 中有无 token ,没有就跳转到登录页面,有则跳转到对应路由页面

    5、每次调后端接口,都要在请求头中加token

    6、后端判断请求头中有无token,有token,就拿到token并验证token,验证成功就返回数据,验证失败(例如:token过期)就返回401,请求头中没有token也返回401

    7、如果前端拿到状态码为401,就清除token信息并跳转到登录页面

    1、登录成功后将后台返回的token和user存在store

      login() {  
           // 组件中使用get方法
           var url='api/user/login';
            axios({ method: "get",
                            url: url,
                            params: {
                              name: this.name,
                              password: this.password,          
                              }
                            }                                  
                ).then((response) => {
                   console.log(response)
                    this.$message({ message: "登录成功", type: 'success' });
                    //将后台返回的token和user存在store
                    this.$store.commit('SET_TOKEN', res.data.data.token)
                    this.$store.commit('GET_USER', JSON.stringify(res.data.data))
                   if(response.data.data){ this.$router.push({name:'HelloWorld',params:{name: this.name}});}
                   else{
                     this.password="";
                     alert("账号或者密码出错,请重新输入")
                   }
                 
                   
                }).catch((error) => {
                    console.log(error)
                }) 
        },

    2、VUEX store配置存储token

    目录结构

     

    index.js文件

    import Vue from 'vue';
    import Vuex from 'vuex';
    import user from './modules/user';
     
    Vue.use(Vuex);
     
    const store = new Vuex.Store({
      modules: {
        app,
        user,
      },
    });
     
    export default store

    user.js文件,包含需要保存的用户信息

    const user = {
        state: {
            user: window.sessionStorage.getItem('user'),
            token: window.sessionStorage.getItem('token')
        },
     
        mutations: {
            //将token保存到sessionStorage里,token表示登陆状态
            SET_TOKEN: (state, data) => {
                state.token = data
                window.sessionStorage.setItem('token', data)
            },
            //获取用户名
            GET_USER: (state, data) => {
                // 把用户名存起来
                state.user = data
                window.sessionStorage.setItem('user', data)
            },
            //登出
            LOGOUT: (state) => {
                // 登出的时候要清除token
                state.token = null
                state.user = null
                window.sessionStorage.removeItem('token')
                window.sessionStorage.removeItem('user')
            }
        },
        actions: {
     
        }
    };
     
    export default user;

     

    3、将token加入axios请求头 main.js

    import store from './store';
    // 创建axios实例
    var instance = axios.create({    timeout: 1000 * 12});
    // 设置post请求头
    instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
    /**
     * 请求拦截器
     * 每次请求前,如果存在token则在请求头中携带token
     */
    instance.interceptors.request.use(
        config => {
            // 登录流程控制中,根据本地是否存在token判断用户的登录情况
            // 但是即使token存在,也有可能token是过期的,所以在每次的请求头中携带token
            // 后台根据携带的token判断用户的登录情况,并返回给我们对应的状态码
            // 而后我们可以在响应拦截器中,根据状态码进行一些统一的操作。
            const token = store.state.user.token;
            token && (config.headers.common['token']  = token);
            return config;
        },
        error => Promise.error(error))
    //在请求头中携带token
        axios.defaults.headers.common['token'] =store.state.user.token;

    4、获取

    this.$store.state.user.token
    //获取当前登录人
    this.$store.state.user.user
    展开全文
  • vue实现token登录

    2021-03-26 14:51:18
    token实现登录的是利用vuex来进行管理,具体思路如下 1.在用户登录后获取到用户的登录信息,并获取信息中的token值将token放入sessionStroge中 //省略请求过程 if (res.data.code == '00000') {//请求成功 this...

    用token实现登录的是利用vuex来进行管理,具体思路如下
    1.在用户登录后获取到用户的登录信息,并获取信息中的token值将token放入sessionStroge中

           //省略请求过程
            if (res.data.code == '00000') {//请求成功
                this.$message.success('登录成功')
                sessionStorage.setItem('userName', res.data.data.userName)
                sessionStorage.setItem('token', res.data.data.token)
                this.$store.state.loginBoo = true
                this.$router.push({ path: '/Index' })
              } else {//请求失败
                this.$message.error('登录失败,请重新登录')
                }
    

    3.在store/index.js,利用vuex获取sessionStroge中的token值

    export default new Vuex.Store({
      state: {
        //token
        token: window.sessionStorage.getItem("token") ? window.sessionStorage.getItem("token") : '',
      }
    })
    

    4.在main.js中进行路由跳转的判断,当有token时进入登入页面,没有时返回登录页

    //导航守卫
    router.beforeEach((to, from, next) => {
      if (to.path === '/login') {
        next();
      } else {
        let token = this.$store.state.token;//获取vuex中token的值
     
        if (token === 'null' || token === '') {
          next('/login');
        } else {
          next();
        }
      }
    })
    

    5.如果用户退出登录,清除token,并返回登录页面

    sessionStorage.clear()
    this.$router.push({path: '/Login'})
    

    以上就是vue实现token登录的方式,如果觉得有用请多多关注点赞,博主会分享自己使用的过程中遇到的难点问题,大家共同进步!

    展开全文
  • vue实现token用户登录

    万次阅读 多人点赞 2019-08-31 17:52:25
    趁着周末把项目中登录部分的实现总结下。 一、在前后端分离的情况下,使用token登录验证的思路大致如下: 1、在第一次登录的时候前端调用后端的接口,把用户名和密码传给后端。 2、后端收到请求,验证用户名和密码...
  • VUE实现token登录验证

    千次阅读 多人点赞 2019-04-01 17:47:14
    实现这个登录功能的过程真是一波三折,中途出现了bug,整了两三天才解决了问题,心力交瘁,简直一个...现在详细地记录一下实现token登录验证的步骤,以防以后再犯错 1.封装store对token的操作方法 首先在src目录下...
  • 在前后端完全分离的情况下,Vue项目中实现token验证大致思路如下: 1、第一次登录的时候,前端调后端的登陆接口,发送用户名和密码 2、后端收到请求,验证用户名和密码,验证成功,就给前端返回一个token 3、前端...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 576
精华内容 230
关键字:

vue登录token实现

vue 订阅