如何在vue中判断用户是否登录,登录权限

用vue-router来控制用户登录权限的原理,实际上就是应用了vue-router提供的router.beforeEach来注册一个全局钩子。具体用法

根据判断是否具有登录权限来设置路由跳转,如果没有全选统一跳转到登录页面。

第一步:新建一个名字为permission的js文件,代码如下

import router from './router'
import NProgress from 'nprogress' // Progress 进度条
import 'nprogress/nprogress.css'// Progress 进度条样式

router.beforeEach((to, from, next) => {
  NProgress.start(); // 开启Progress
  if (sessionStorage.getItem('accessToken')) {
    next()
  } else {
    if (to.path ==="/login"|| to.path ==='/register'){
      next()
    }else {
      next('/login')
    }
    NProgress.done()
  }
});
router.afterEach(() => {
  NProgress.done() // 结束Progress
});

在mian.js中导入permission.js,代码如下:

import './permission' // 权限

原文:https://blog.csdn.net/shirukai/article/details/80781586?utm_source=copy 版

 

 

首先需要新建一个store文件夹,新建index.js   、 

main.js中引入store

将状态信息保存至localStorage中

 
  1. import Vue from 'vue'

  2. import Vuex from 'vuex'

  3.  
  4. Vue.use(Vuex)

  5. const key = 'user'

  6. const isLogin = 'isLogin'

  7. const store = new Vuex.Store({

  8. state () {

  9. return {

  10. user: null,

  11. isLogin: '0'

  12. }

  13. },

  14. getters: {

  15. getStorage: function (state) {

  16. if (!state.user) {

  17. state.user = JSON.parse(localStorage.getItem(key))

  18. state.isLogin = localStorage.getItem(isLogin)

  19. }

  20. return state.user

  21. }

  22. },

  23. mutations: {

  24. $_setLogin (state, value) {

  25. state.isLogin = value

  26. localStorage.setItem(isLogin, value)

  27. },

  28. $_setStorage (state, value) {

  29. state.user = value

  30. localStorage.setItem(key, JSON.stringify(value))

  31. },

  32. $_removeStorage (state) {

  33. state.user = null

  34. localStorage.removeItem(key)

  35. }

  36. }

  37. })

  38.  
  39. export default store

然后在main.js

 
  1. router.beforeEach((to, from, next) => {

  2. if (to.matched.some(m => m.meta.auth)) {

  3. if (window.localStorage.isLogin === '1') {

  4. next()

  5. } else if (to.path !== '/') {

  6. next({path: '/login'})

  7. Vue.prototype.$message.warning('检测到您还未登录,请登录后操作!')

  8. }

  9. } else {

  10. next()

  11. }

  12. })

在组件中表单验证成功后,点击按钮时:

 
  1. this.$message({

  2. message: '登录成功',

  3. type: 'success'

  4. })

  5. this.$store.commit('$_setStorage', {user: this.loginForm.username})

  6. this.$store.commit('$_setLogin', '1')

  7. this.$router.push({name: 'Home'})

前提是需要在router中添加meta: {auth: true}

 
  1. {

  2.     path: '/',

  3.     component: Login,

  4.     name: 'Login',

  5.     meta: {auth: true}

  6. },

原文:https://blog.csdn.net/qq_32917123/article/details/80898439?utm_source=copy 

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 猿与汪的秘密 设计师:上身试试 返回首页