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

    万次阅读 多人点赞 2019-06-25 17:09:43
    在项目中,最基本的登录都是必须的,结合Vue的路由,涉及最多的就是登录状态的判断。 (1)判断登录方案需要满足下面几点: 未登录状态下的刷新: 在需要登录页面中刷新是需要跳转到登录页的; 在不需要登录的页面中...

    在项目中,最基本的登录都是必须的,结合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"
            });
          });
        },
        }
    

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

    展开全文
  • 需要使用vuex,在state中存储一个isLogin字段,用于判断是否登录 export const store = new Vuex.Store({ state: { isLogin: false } }) 在main.js中添加判断是否登录 //判断是否登录 router.beforeEach...

    需要使用vuex,在state中存储一个isLogin字段,用于判断是否登录

    export const store = new Vuex.Store({
      state: {
        isLogin: false
      }
    })

    在main.js中添加判断是否登录

        //判断是否登录
        router.beforeEach(function (to, from, next) {
          if (to.meta.needLogin) {
            //通过查看state中的isLogin判断是否登录
            if (_this.$store.state.isLogin) {
              next(); //表示已经登录
            } else {
              //next可以传递一个路由对象作为参数 表示需要跳转到的页面
              next({
                name: "Login"
              });
            }
          } else {
            //表示不需要登录
            next(); //继续往后走
          }
        });

    登录页中添加修改isLogin字段状态

    this.$store.state.isLogin = true;

     

    展开全文
  • 网页一进入判断是否登录,未登录跳转到登录页面 router.js export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld, meta: { title: '首页', type:...

    网页一进入判断是否登录,未登录跳转到登录页面,Vue登录注册,并保持登录状态

    router.js

    
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'HelloWorld',
          component: HelloWorld,
          meta: {
            title: '首页',
            type: 'login'  // 是否需要判断是否登录,这里是需要判断
          }
        },
        {
          path: '/login',
          name: 'login',
          component: login,
          meta: {
            title: 'login',
            type: '' // 不需要鉴权
          }
        }
      ]
    })
    
    

    main.js

    
    router.beforeEach((to, from, next) => {
      if (to.meta.title) {
        document.title = to.meta.title
      }
      const type = to.meta.type
      // 判断该路由是否需要登录权限
      if (type === 'login') {
        if (window.localStorage.getItem('login')) {
          next()
        } else {
          next('/login')
        }
      } else {
        next()  // 确保一定要有next()被调用
      }
    })
    

    来源:https://segmentfault.com/a/1190000016889438

    展开全文
  • vue登录权限判断方法

    千次阅读 2019-06-20 15:14:03
    在路由配置里,使用路由的全局导航守卫来判断是否登录: // 实例化对象 let router = new VueRouter({ routes }) // 注册导航守卫(回调函数) router.beforeEach((to, from, next) => { if (to.path === '/login')...

    在路由配置里,使用路由的全局导航守卫来判断是否登录:

    // 实例化对象
    let router = new VueRouter({
      routes
    })
    // 注册导航守卫(回调函数)
    router.beforeEach((to, from, next) => {
      if (to.path === '/login') {
        // 登录页 不需要判断
        next();
      } 
      //不是去登录页面
      else {
        // 不是去登录页面:判断登录 判断token是否存在即可
        let token = window.sessionStorage.getItem("token");
        if (token) {
          // 登录成功
          // 继续访问
          next();
        } else {
          // 不是去登录页面,也没有登录(判断是否有token)
          // 这里不是Vue实例 无法通过this访问 但是可以访问到Vue构造函数 可以通过原型访问
          Vue.prototype.$message.error('请先登录');
          // 打会登录页 可以使用next 进行路由跳转
          next('/login');
        }
      }
    })
    // 暴露出去
    export default router;
    
    展开全文
  • vue 判断是否登录,进入不同的页面

    千次阅读 2018-12-28 11:03:54
    1.以前用的方法是直接在app.vue入口文件来判断跳转登录页面,还是主页面, 优点:简单明了,直接根据是否存在session来判断入口文件是登录还是主页面; 缺点:体验感不好,每次判断前都会有登录页面出现一下,再...
  • 首先需要新建一个store文件夹,新建index.js 、 main.js中引入store ...import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const key = 'user' const isLogin = 'isLogin' const store = new ...
  • vue判断用户是否登录,没有登录跳转登录页面 在 main.js 中判断是否需要登录 router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requiresAuth)) { //这里判断用户是否...
  • 一进入网页,首先判断有没有登录,没有登录则跳转到登录页 在router文件夹下index.js(路由文件)中,做如下修改(在需要判断的路由里添加 meta: { requireAuth: true // 判断是否需要登录 }) 在main.js 同级...
  • Vue条件判断

    千次阅读 2020-08-06 16:29:11
    Vue条件判断 1. v-if <div id="app"> <h1 v-if="showed">Hello World1!</h1> <h1 v-if="!showed">Hello World2!</h1> </div> <script> const vue = new Vue({ el:...
  • 网页一进入判断是否登录,未登录跳转到登录页面 router.js export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld, meta: { title: '首页', req...
  • vue项目中,切换路由时肯定会碰到需要登录的路由,其原理就是在切换路径之前进行判断,你不可能进入页面再去判断有无登录重新定向到login,那样的话会导致页面已经渲染以及它的各种请求已经发出。 一、如需要登录...
  • Vue判断用户是否登录

    千次阅读 2019-05-22 10:32:15
    给路由加一个meta属性: router.beforeEach((to, from, next) =>... record.meta.requireAuth)){ // 判断该路由是否需要登录权限 if (token) { // 判断当前的token是否存在 next(); } ...
  • vue 正则判断

    千次阅读 2019-05-13 18:00:00
    value=value.replace(/[^\d.]/g,'').replace(/\.{2,}/g,'.').replace('.','$#$').replace(/\./g,'').replace('$#$','.');if(value.indexOf('.')< 0 && value !=''){value= parseFloat(value)}if(value.le...
  • Vue路由判断前进后退

    千次阅读 2019-08-08 19:22:40
    判断方式应该有很多,但是我感觉最简单的方式,也是我项目中采用的方式: 定义全局跳转和返回函数,直接“接管”Vue路由的前进和后退事件: //注册全局方法 Vue.prototype.push = (url: string, closeTransition...
  • vue 利用路由守卫判断是否登录

    千次阅读 2018-07-04 16:22:53
    1.在router下的index.js 路由文件...import Vue from 'vue' import Router from 'vue-router' import {LOGIN} from '../common/js/islogin' import HelloWorld from '@/components/HelloWorld' import Login from '...
  • vue判断手机移动端

    千次阅读 2019-07-26 14:45:24
    vue判断手机移动端 //App.vue,判断是否为移动端 _isMobile() { let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|...
  • vue表单判断必填项

    万次阅读 2019-10-11 14:43:09
    :isSpace是用正则写的一个函数判断是否有空字符 判断是否为空的正则 export function isSpace ( str ) { const reg = /(^\s+)|(\s+$)|\s+/g return reg . test ( str ) } < script ...
  • vue路由跳转时 判断用户是否处于 登录状态
  • 在app.vue页面写一个判断事件并调用 _isMobile(){ let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG...
  • Vue全局判断是否登陆

    千次阅读 2019-06-24 12:30:00
    Vue中Router是一个非常重要的对象,那么在判断是否登陆的时候,需要一个一个页面去写吗?并不是的。可以通过router来实现,这个和aop有点相似 router=>index.js //跳转之前 router.beforeEach((to,from,...
  • 需求说明,后台有做半个小时不请求接口的话返回标识退出登录,但是要请求接口才行,现在要实现前端用js判断半个小时不操作界面的话自动跳转到登录页面。 创建一个.js文件,在main.js引入此js(vue框架) 在登录...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 103,817
精华内容 41,526
关键字:

vue先判断登录

vue 订阅