精华内容
下载资源
问答
  • vue-判断用户是否登录

    千次阅读 多人点赞 2019-06-25 17:09:43
    (1)判断登录方案需要满足下面几点: 未登录状态下的刷新: 在需要登录页面中刷新是需要跳转到登录页的; 在不需要登录的页面中刷新,不需要跳转; (2)在未登录状态下,跳转到需要登录页面时,会直接跳转到登录页; 一...

    在项目中,最基本的登录都是必须的,结合Vue的路由,涉及最多的就是登录状态的判断。
    (1)判断登录方案需要满足下面几点:
    未登录状态下的刷新:

    1. 在需要登录页面中刷新是需要跳转到登录页的;
    2. 在不需要登录的页面中刷新,不需要跳转;

    (2)在未登录状态下,跳转到需要登录页面时,会直接跳转到登录页;

    一、先在路由文件里修改--------router / index.js 路由中加校验
    直接在路由配置的时候,给路由添加一个自定义的meta对象,在meta对象中可以设置一些状态,来进行一些操作。用它来做登录校验再合适不过了

    {
          path: "/mengxiang",
          name: "Mengxiang",
          component: Mengxiang,
          meta: {
            needLogin: true //需要加校检判断的路由
          },
        },
    

    二、main.js 中判断该路由是否需要登录权限

    router.beforeEach(function(to, from, next) {
      if (to.meta.needLogin) {
        //页面是否登录
        if (localStorage.getItem("token")) {
          //本地存储中是否有token(uid)数据
          next(); //表示已经登录
        } else {
          //next可以传递一个路由对象作为参数 表示需要跳转到的页面
          next({
            name: "login"
          });
        }
      } else {
        //表示不需要登录
        next(); //继续往后走
      }
    });
    

    三、login.vue 登录组件内,登陆成功后的处理

      methods: {
        onClickLeft() {
          this.$router.go("-1");
        },
        login() {
          axios({
            type: "get",
            url: "请求的接口路径",
            params: { username: this.phone, password: this.password }
          }).then(res => {
            console.log(res);
            localStorage.setItem("token", this.phone);
            this.$router.push({
              name: "Home"
            });
          });
        },
        }
    

    以上就实现了判断是否登录的状态,如果未登录的状态就会跳转到登录页面

    展开全文
  • vue用户登录状态判断

    2019-10-08 07:41:33
    之前项目中用来判断是否登录我写了多种方案,但是最终只有一个方案是比较好的,这篇博客就是分享该方案;...判断登录方案需要满足下面几点: 未登录状态下的刷新: 1.1 在需要登录页面中刷新是需要跳转...

    之前项目中用来判断是否登录我写了多种方案,但是最终只有一个方案是比较好的,这篇博客就是分享该方案;

    先说基本要求:

    • 项目中的登录状态是依据服务器里的状态来作为判断依据;
    • 每一个需要登录后才能操作的接口,如果未登录都会返回未登录的错误;
    • 项目中使用 vuex,axios,router;

    判断登录方案需要满足下面几点:

    1. 未登录状态下的刷新:
      1.1 在需要登录页面中刷新是需要跳转到登录页的;
      1.2 在不需要登录的页面中刷新,不需要跳转;
    2. 在未登录状态下,跳转到需要登录页面时,会直接跳转到登录页;

    先在路由文件里修改:

    export default {
      path: '/person',
      component: person,
      name: 'person',
      redirect: 'person/index',
      meta:{
        requireLogin:true,
      },
      children: [
          //子页面
        ]
      }

    假如上面的代码是一个用户中心的路由,他是主页面,其他都是他的子页面,那么只需要在meta里添加requireLogin:true一次就行了,子页面不需要修改什么;


    在 main.js 里添加:

    axios.interceptors.response.use(
        response => {
          if(response.data.code === 500) {
            if (response.data.msg === '请先登录') {
              router.push({
                path: '/login',
                query: {redirect: router.history.current.fullPath}
              })
              //如果需要可以在这里将 vuex 里的 user 改为空对象
            }
          //显示错误信息
          return Promise.reject(response.data)
        }
    
        if(response.data.code === 0){
          return response;
        }
    }, error => {
        //显示错误信息
        return Promise.reject(error.response.data)
    });
    
    
    router.beforeEach((to, from, next) => {
      let user = router.app.$options.store.state.user;
      if (to.matched.some(record => record.meta.requireLogin)) {
        if (JSON.stringify(user) === '{}') {
          next();
          router.push({ path: '/login',query: { redirect: to.fullPath }})
        }else {
          next()
        }
      } else {
        next()
      }
    });
    

    根据 user 是否为一个空对象来判断本地登录状态;


    在 app.vue 里添加:

    created(){
        this.$store.dispatch('getUser');
    }

    每一次刷新都会触发该函数,作用是判断登录状态和获取最新的信息;


    在 vuex/index 添加:

    const store = new Vuex.Store({
        state: {
            user: JSON.parse(localStorage.user || '{}'),
        },
        mutations: {
            changeUser(state, msg){
                state.user = msg;
            },
        },
        actions: {
            getUser({commit}){
              axios.get(api.info).then(data => {
                commit('changeUser', data.data.member);//需根据实际修改
                localStorage.user = JSON.stringify(data.data.member || {});
              }).catch(err => {
                commit('changeUser', {});
                if (router.currentRoute.matched.some(record => record.meta.requireLogin)) {
                  router.push({
                    path: '/login',
                    query: {redirect: router.currentRoute.fullPath}
                  })
                }
              })
            },
        }
    })

    在某页面下刷新,可以根据是否为需登录页面进行判断,并且已登录可以更新用户信息;
    用户的信息都是存储在 localStorage 里来成为默认值,但是 ajax 连接失败的话,会变为空;

    !!注意!!
    上面的方法适用的是,不知道后台的登录保存时间,然而,如果你知道后台的登录状态保存时间的话,我想可以有一种更好的方法,即 cookie
    因为 cookie 会有一个保存的时间, 进入一个页面判断是否存在;
    还可以使用 Web Workers ,在后台添加一个计时器,每一段时间判断 cookie 是否存在,不过 cookie 能存储的东西不多,还有 IE 对Web Workers 是不支持的,所以最好在 main 里判断一下页面是否对 web workers ;

    放下我之前项目所用的登录检查方式:

    let hasLogin = false // 是否登录过
    // 登录拦截
    router.beforeEach((to, from, next) => {
        if (document.cookie.includes('userName')) {
            hasLogin = true
            if (permission.indexOf(to.path) > -1) {
                next()
            } else {
                try {
                    // 简单的权限判断
                    let routesKey = Cookie.get('routesKey').split(',')
                    let key = to.path.split('/')[1]
                    if (routesKey.indexOf(key) > -1) {
                        next()
                    } else {
                        next({path: '/'})
                    }
                } catch (e) {
                    next({path: '/login'})
                }
            }
        } else {
            if (to.path === '/login') { // 如果是登录页面路径,就直接next()
                next()
            } else {
                if (hasLogin) {
                    Cookie.clear('userName')
                    ELEMENT.Message({
                        message: '登录失效,请重新登录!',
                        center: true,
                        type: 'warning'
                    })
                }
                next({path: '/login', query: {redirect: to.fullPath}})
            }
        }
    })

    完;

    转载于:https://www.cnblogs.com/Grewer/p/8440726.html

    展开全文
  • 安装之后创建一个token.js, 为了项目目录的清晰,可以创建一个token文件夹,将token.js放到里面。文件创建OK之后,该是写内容了,写内容之前说说jsonwebtoken提供的方法: 1、sign: 生成token、2、decod: 解析token...
  • vue登录

    2018-12-24 15:17:00
    1:在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录。如果用户已经登录,则顺利进入路由, 否则就进入登录页面。在路由管理页面添加meta字段 2:router/index.js文件...

    1:先在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录。如果用户已经登录,则顺利进入路由, 否则就进入登录页面。在路由管理页面添加meta字段

    2:router/index.js文件,例如,在用户直接跳转/manage 路径下的时候,实现路由拦截

       {path:'/manage',

        name:'manage',

        component:manage, 

        meta:{requireAuth:true}

                },

    3: 在main.js 中加上

    router.beforeEach((to, from, next) => {
    console.log(to);
    console.log(from);
    if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
    if(localStorage.getItem('access_token')){ //判断本地是否存在access_token
    next();
    }else {
    next({
    path:'/'
    })
    }
    }
    else {
    next();
    }
    /*如果本地 存在 token 则 不允许直接跳转到 登录页面*/
    if(to.fullPath == "/login"){
    if(localStorage.getItem('access_token')){
    next({
    path:from.fullPath
    });
    }else {
    next();
    }
    }
    })

    转载于:https://www.cnblogs.com/cs122/p/10168749.html

    展开全文
  • 检查状态:进入页面时或者路由变化时先判断是否有登录状态(保存在cookie或者本地存储的值); 如果有登录态则查询登录信息(uid,头像等...)并保存起来;如果没有则跳转到登录页;如果未登录的话 在登录页面(或者登录...

    技术栈

    一般过程

    在一般的登录过程中,一种前端方案是:

    1. 检查状态:进入页面时或者路由变化时判断是否有登录状态(保存在cookie或者本地存储的值);
    2. 如果有登录态则查询登录信息(uid,头像等...)并保存起来;如果没有则跳转到登录页;

    如果未登录的话

    1. 在登录页面(或者登录框),校检用户输入信息是否合法;(检测表单正则是否合法)
    2. 校检成功后发送登录请求;校检不成功则反馈给用户;
    3. 登录成功则从后端数据中取出session信息保存登录状态(可能需要跳转);登录不成功则提示用户不成功;
    4. 用户做出注销操作时删除登录状态。(判断cookie是否存在)

    在此之前已经写好了两个页面,假设登录页面路由为/login,登录后的路由为/userinfo。这样只需要在App.vue放好router-view用于存放和渲染这两个路由。

    // App.vue
    
    <template>  <div id="app">    <router-view/>  </div></template>
    复制代码

    并做好vue-router配置:  

    // router/index.js
    
    import Vue from 'vue'import Router from 'vue-router'import login from '@/components/login'import UserInfo from '@/components/userinfo'
    
    Vue.use(Router)
    export default new Router({
    //设置两个页面,未登录跳转login  登录后跳转 user_info
    //靠本地cookie来判断是否登录    routes: [{      path: '/login',      component: login    }, {      path: '/user_info',      component: UserInfo    }]
    })
    复制代码

    1.检查状态与跳转 (已经登录)

    怎么来判断是否登录过呢?就是靠 main.js 里面的 checkLogin() 方法

    我们需要检查状态:

    1.用户打开页面时;
    2.路由发生变化时;

    首先需要写好一个检查登录态的方法checkLogin

    // main.js
    
    Vue.prototype.getCookie = getCookie;/* eslint-disable no-new */new Vue({  el: '#app',  router,  template: '<App/>',  components: { App, ElementUI},  watch: {
         //监测router  检测网址、地址栏变化  路由发生变化时
         "$route": 'checkLogin'  },  created() {
        // Vue生命周期 上来就一顿执行    this.checkLogin();  },  methods: {    checkLogin() {      //检查是否存在session      //cookie操作方法在源码里有或者参考网上的即可      if (!this.getCookie('session')) {        //如果没有登录状态则跳转到登录页        this.$router.push('/login');      } else {        //否则跳转到登录后的页面        this.$router.push('/user_info');      }    }  }})复制代码

    至此,我们就完成了一般过程中的第1步。(假如说有cookie登录成功了) 登录成功就跳转到 

    this.$router.push('/user_info');复制代码



    如果没登录成功就跳转到 Login.vue   登录页方法如下    (监测到还未登录)

    输入校验和发送登录请求

    为了防止一些不符合预期的字符和过于频繁的请求传到后台,前端要对用户的输入进行校验和防止重复请求。当然不同网站的合法字符不一样,这里只做为空时不合法的校验:

    // login.vue
    <template>  <div id="login">    <el-form ref="form" :model="form" label-width="80px">      <el-form-item label="账号">        <el-input v-model="form.name"></el-input>      </el-form-item>      <el-form-item>        <el-button type="primary" @click="login">立即登录</el-button>        <el-button>取消</el-button>      </el-form-item>    </el-form>  </div></template>
    
    
    methods: {
          //点击执行立即登录执行 login 方法      login() {
              //调用登录方法,存储cookie
              //这里可以判断一下 if(this.form=="") input里面的值是否为空          this.toLogin();      },      toLogin() {        setTimeout(() => {          //登录状态15天后过期          let expireDays = 1000 * 60 * 60 * 24 * 15;
              //存储本地Cookie          this.setCookie('session', 'blablablablabla...', expireDays);          this.isLoging = false;          //登录成功
              //点击 <router-link :to="..."> 等同于调用 router.push(...) push的意思就是跳转          this.$router.push('/user_info');        }, 300)      }    }复制代码

    执行登录成功,跳转到 user_info.vue 就证明登录成功啦.


    转载于:https://juejin.im/post/5a9511ecf265da4e95190f3b

    展开全文
  • Vue实现登录记住密码

    2020-08-18 11:06:47
    1.先判断用户在登录时是否勾选记住密码,如果勾选,向cookie中储存登录信息, 如果没有勾选,储存的信息为空 setUserInfo() { var vm = this; // 判断用户是否勾选记住密码,如果勾选,向cookie中储存登录信息, ...
  • 问题:0经验学简单的登录比对如果没有下载vue独立的文件,可以看我上一篇文章-----学习前端鉴权之前创建vue项目,前端女生带你看具体步骤(1)第一步:在路由里新加个简单的登录页 router/index.js在这二个地方加...
  • 在实际的商业项目中,基本都会有登录功能,然后有些页面是登录之后才能查看的,没有登录的话会跳转到登录页,登录成功再返回并刷新数据,几乎所有的应用都是采用的这一套逻辑,那么这一套逻辑在我们的 vue 项目中...
  • Vue项目中实现用户登录及token验证说一下我的实现步骤:使用easy-mock新建登录接口,模拟用户数据使用axios请求...就使用导航守卫(vue-router.beforeEach)判断 sessionStorage 中有无 token,没有就跳转到登录页面...
  • vue+vue-cookie 微信授权登录

    千次阅读 2018-11-16 16:04:49
    在router.beforeEach钩子中判断用户当前登录状态 若没有登录则保存用户进入的url并跳转到login授权页面 login授权页面完成微信授权以及isLogin(用户登录状态)的写入实现用户登录 获取前面保存的用户进入url并...
  • vue-用户登录后才操作

    2020-08-09 21:57:54
    一、在路由文件里修改--------router / index.js 路由中加校验 直接在路由配置的时候,给路由添加一个自定义的meta对象,在meta对象中可以设置一些状态,来进行一些操作。用它来做登录校验再合适不过了 { path: ...
  • Vue中的验证登录状态

    2019-03-08 09:14:25
    Vue项目中实现用户登录及token验证 说一下我的实现步骤: 使用easy-mock新建登录接口,模拟用户数据 ...前端每次跳转时,就使用导航守卫(vue-router.beforeEach)判断 sessionStorage 中有无 token,没有就跳...
  • 前端每次跳转时,就使用导航守卫(vue-router.beforeEach)判断 sessionStorage 中有无 token ,没有就跳转到登录页面,有则跳转到对应路由页面。 注销后,就清除sessionStorage里的token信息并跳转到登录页面 使用...
  • 1,先判断手机号和验证是否为空, 2,点击发送验证码,得到验证码 3,输入的验证码是否为空和是否正确, 4,最后向服务发送请求 界面展示: 1.准备工作 这个会对input进行封装处理 <template> <div class...
  • vue—微信授权登录

    2020-04-15 23:43:33
    主要遇到的问题就是 进入单页应用,一边渲染页面一边判断用户有没有登录,当判断到没有登录时异步数据请求已经发送出去了,然后要跳转到微信授权页面,这样就浪费了一次网络请求且用户可能要去点击这个数据了结果....
  • 2 在 导航守卫 中先判断当前访问的页面是不是登录页面 3 如果是登录页面,直接放行(next()) 4 如果不是登录页面,就从 localStorage 中获取 token,判断有没有登录 5 如果登录了,直接放行(next()) 6 如果没有...
  • 将获取的数据,通过后台接口传参去请求,根据返回数据判断请求是否成功 ,成功让用户登录并存储token。 静态布局 Element-ui https://element.eleme.cn/#/zh-CN/component/installation 跳转 <template> <...
  • Vue路由守卫及页面登录权限控制的设置方法①在我们的登录页面存储一个登录数据② 添加路由守卫方法一: 直接在路由中添加方法二:当我们使用的是export default 方法时可以在main.js中添加 router.beforeEach((to,...
  • 1,先判断手机号和验证是否为空, 2,点击发送验证码,得到验证码 3,输入的验证码是否为空和是否正确, 4,最后向服务发送请求 界面展示 1.准备工作 这个会对input进行封装处理 <!-- 输入框 --> <...
  • SpringBoot+Vue+Redis实现单点登录(一处登录...用户在前端填写用户信息登录后,后台接收数据去数据库进行判断,如果登录成功,创建map集合,以用户id为键,token为值,通过当前登录用户的id去获取token,如果tok...
  • vue如何实现按下回车键登录 上效果图 回车键的键值是13 这样思路就清晰了,只需一个简单的if判断再调用登录事件的方法就OK了 上代码 mounted () { var that = this document.onkeydown = () => { var key =...
  • 比如现有需求如下: 1:有两种权限类型的页面,有权限的页面需要登录才能访问,没有权限的页面不...如果没有token,则路由拦截,并跳转到登录页面,登录成功后直接访问页面A,而不是回到主页面 实现代码如下: ...
  • 主要遇到的问题就是进入单页应用,一边渲染页面一边判断用户有没有登录,当判断到没有登录时异步数据请求已经发送出去了,然后要跳转到微信授权页面,这样就浪费了一次网络请求且用户可能要去点击这个数据了结果.....
  • 实现功能:1....每次进入登录页,去读取cookie,如果浏览器的cookie中有账号信息,就自动填充到登录框中,存cookie是在登录成功之后,判断当前用户是否勾选了记住密码,如果勾选了,则把账号信...

空空如也

空空如也

1 2 3 4 5
收藏数 97
精华内容 38
关键字:

vue先判断登录

vue 订阅