Vue 路由权限控制，只能从登陆页面进入系统

港控/mmm° 2022-05-13 06:44 108阅读 0赞

实现这种校验分几个步骤  
1.设置路由是否需要校验的阈值  
在路由配置加上meta的判断

routes: [{
        path: '/',
        name: 'Login',
        component: () => import('@/pages/login/login')
      }, {
        path: '/home',
        name: 'Home',
    
        meta: {
       requireAuth: true},
    
        components: {
          default: () => import('@/pages/home/home'),
          mainheader: MainHeader
        }
      }]

第二步  
设置登录保存状态

let loginstatus = true
        this.$store.commit('setRouting', loginstatus)
    
        // 在vuex文件中
        loginstatus: sessionStorage.getItem('loginstatus') || false
    
        setRouting (state, loginstatus) {
          state.loginstatus = loginstatus
          sessionStorage.setItem('loginstatus', loginstatus)
        }

这里为什么用sessionStorage存储，而不是localStorage、  
因为localStorage是永久的存储，如果用它做判断条件，失去了做权限的意义  
sessionStorage当页面关闭后，存储的数据就会消失，适合用来判断是否登录，还有一点，vue项目的是单页面应用，所以可以使用sessionStorage来实现  
第三步：  
路由登录跳转权限控制  
在main.js中设置路由配置

// 配置路由权限
    router.beforeEach((to, from, next) => { if (to.meta.requireAuth) { // 判断该路由是否需要登录权限 if (sessionStorage.getItem('loginstatus')) { // 判断本地是否存在access_token next() } else { // 未登录,跳转到登陆页面，并且带上 将要去的地址，方便登陆后跳转。 next({ path: '/', query:{ referrer: to.fullPath} }) } } else { next() } })

ok,完成，在除去登录页面之外的路由都设置meta，就可以实现只能从登录页面登录了。