乐趣区

关于vue-router:vue登录与注册判断页面权限是否需要登录保存状态30天内免登陆

jiezi

通常 vue 注册或登录保留用户状态须要用到 Vuex 和 Vue Router

Vuex：保留用户状态，是否登录等
Vue Router: 页面门路与权限

在一个 Vue 我的项目中，store 文件夹个别是 Vuex 文件夹，咱们能够创立一个 index.js 文件 最简略的 Store


import Vue from 'vue'
import Vuex from 'vuex'
 
Vue.use(Vuex)
const store = new Vuex.Store({state () {
    return {
    //sessionStorage
      uid:window.sessionStorage.getItem('uid'),//storage 默认存储为字符串，转换成本来数据格式
      isLogin: window.sessionStorage.getItem('isLogin'),
    //localstorge
      autoLoginIn30Days:window.localStorage.getItem('autoLoginIn30Days'),
      LocalUid:window.localStorage.getItem('LocalUid'),
      localIsLogin:window.localStorage.getItem('localIsLogin'),
      
    }
  },
  getters: { },
  mutations: {
    //sessionStorage
    $_setLogin (state, value) {
      state.isLogin = value
       sessionStorage.setItem('isLogin', value)
     
    },
    $_setUID(state,value){
        state.uid=value
        sessionStorage.setItem('uid',value)
    },
    
    // localstorge
    $_setLocalLogin (state, value) {
      state.localIsLogin = value
        localStorage.setItem('localIsLogin', value)
     
    },
    $_setLocalUID(state,value){
        state.LocalUid=value
        localStorage.setItem('LocalUid',value)
    },
    AUTO_LOGIN:(state,value)=>{
        state.autoLoginIn30Days=value
        if(state.autoLoginIn30Days){window.localStorage.setItem('LocalUid',state.LocalUid)//
            window.localStorage.setItem('localIsLogin',state.localIsLogin)

            window.localStorage.setItem('autoLoginIn30Days',state.autoLoginIn30Days)
        }else{window.localStorage.removeItem('localIsLogin')
            window.localStorage.removeItem('LocalUid',state.LocalUid)
            window.localStorage.setItem('autoLoginIn30Days',state.autoLoginIn30Days)
        }
    },
    LOGOUT:(state)=>{
        state.localIsLogin=null
        state.localUser=null
        state.autoLoginIn30Days=false
        
        window.sessionStorage.removeItem('isLogin')
        window.sessionStorage.removeItem('user')        
        window.localStorage.removeItem('localIsLogin')
        window.localStorage.removeItem('localUser')
    window.localStorage.setItem('autoLoginIn30Days',false)
        
        
    }

    
  }
})
 
export default store

更改 Vuex 的 store 中的状态的惟一办法是提交 mutation, 更改 store.state 的办法都写在 mutations: {}中，这外面咱们写了几个办法：
办法 1. 应用 sessionStorage 保留以后登录 uid 和是否已登录 isLogin
办法 2.localStorage 保留登录 uid 和是否已登录 isLogin

咱们看 b 站的登录注册有实现记住我免登陆的性能，要实现相似的成果是：
如果用户未勾选记住我，则只应用办法 1 sessionStorage 保留用户信息，如果用户勾选了记住我，则要应用办法 2 localStorage 保留用户信息

这里 AUTO_LOGIN 办法就是 30 天免登陆的状态提交到 store，LOGOUT 是退出登录提交到 store

实现判断页面是否须要登录

我的项目中有一些路由是须要登录才能够进入的，比方集体核心等
有一些路由是不须要登录就能够进入，比方登录页等
去到 routes.js 文件更改：

{
 path: '/',
 redirect: '/home',// 域名间接跳转到主页
},
{
 // 登录
 path: '/login',
 component: login,
 meta: {isLogin: false}
},
{
 // 集体核心
 path: '/personal',
 component: personal,
 meta: {isLogin: true}
},

定义路由的时候能够配置 meta 字段：集体核心页 meta: {isLogin: true} , 参考官网可知，在全局导航守卫中查看元字段，这个全局导航就是咱们权限判断的重点，通常写在 router 文件夹中，咱们为了展现间接写在我的项目 \src\main.js 文件中

import Vue from 'vue'

import App from './App.vue'
import router from './router'

import '@/style/index.scss'
import '@/utils/rem'
import axios from '@/utils/axios'
import store from './store/index'
import global from './utils/global'



Vue.config.productionTip = false
Vue.use(global)



router.beforeEach((to, from, next) => {const isLogin=store.state.isLogin ? store.state.isLogin: window.sessionStorage.getItem('isLogin')
const localIsLogin=store.state.localIsLogin ? store.state.localIsLogin: window.localStorage.getItem('localIsLogin')

let AuthLogin=window.sessionStorage.isLogin=='true' || window.localStorage.getItem('autoLoginIn30Days')=='true' && window.localStorage.getItem('localIsLogin')=='true'  
  
  if (to.matched.some(m => m.meta.isLogin)) {// 须要认证的页面
      
    if (!AuthLogin) {// 如果未认证
    next({path: '/login',query:{}})
    return 
    }else{next()
    }
    
    }else{if(AuthLogin){// 如果已登录，还想想进入登录注册界面，则定向回首页
        next({path: '/home',query:{}})
    }else{next()
    }
    
    }
})

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')

那么判断逻辑已实现，实现的成果是，如果用户进入一个 meta 字段 isLogin:true 的页面，则示意这个页面须要认证，

if (to.matched.some(m => m.meta.isLogin)) {...}

应用 to.matched.some 就是遍历路由数组中每个值进行判断，这样做的益处是子路由to.matched 则只须要给较高一级的路由增加 requiresAuth 即可，其下的所有子路由不用增加。官网也是这样写的：

最初只需在我的项目的 login.vue 中，登录验证办法里后提交状态到 store 即可

            
            if(this.rememberMe){// 勾选了记住我
                this.$store.commit('$_setLocalLogin',true)
                this.$store.commit('$_setLocalUID',123)
                this.$store.commit('AUTO_LOGIN',true)

            }else{this.$store.commit('AUTO_LOGIN',false)
            }
            this.$store.commit('$_setLogin',true)
            this.$store.commit('$_setUID',123)
            this.$router.push({name: 'home', params: {}})

实现了登录逻辑：保留状态 30 天内免登陆

在 login 页面登录，如果用户验证通过，应用 this.$store.commit 提交，用户信息保留到 sessionStorage，同时用户如果勾选了记住我，提交 AUTO_LOGIN，用户信息保留到了 localStorage，敞开浏览器后下次，间接拜访域名 -> 跳转到 home 页，无需登录，用户需在右上角点击退出账号则清空 localstorage

当然这里还须要后盾校验接口，用户登录胜利后保留令牌，这个令牌有过期工夫，检测验证用户起源等，那么用户须要再次登录了

退出移动版