如何在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