Practical use of Vue-router navigation guard

Maji-May — Sun, 19 Jun 2022 10:34:47 +0000

Suppose that there are two types of roles, "admin" and "user". Users are allowed to visit the equipment page. Admins can manage users and can also enter the equipment page by changing the URL.

In /router/index.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

// 公共路由
export const constantRoutes = [{
        path: '/login',
        component: () => import("@/view/login/index.vue"),
    },
    {
        path: '/',
        component: () => import("@/view/layout/index.vue"),
        meta: {
            require: true,
        },
        redirect: '/user',
        children: [{
                path: '/user',
                component: () => import("@/view/user/index.vue"),
                meta: {
                    title: 'User Management', 
                    require: true,
                    keepAlive: true,
                    role: 0
                }
            },
            {
                path: '/chagePwd',
                component: () => import("@/view/changePwd/index.vue"),
                meta: {
                    title: 'Change Password',
                    require: true,
                    keepAlive: true,
                    role: 1
                }
            },
            {
                path: '/userDetail',
                component: () => import("@/view/user/userDetail.vue"),
                meta: {
                    title: 'User Detail',
                    require: true,
                    keepAlive: false,
                    role: 0
                }
            },
            {
                path: '/equipment',
                component: () => import("@/view/equipment/index.vue"),
                meta: {
                    title: 'Equipment Resource Management',
                    require: true,
                    keepAlive: true,
                    role: 1
                }
            },
            {
                path: '/equipmentDetail',
                component: () => import("@/view/equipment/equipmentDetail.vue"),
                meta: {
                    title: 'Equipment Resource Detail',
                    require: true,
                    keepAlive: false,
                    role: 1
                }
            },
        ]
    },
    {
        path: '*',
        component: () => import("@/view/err/404.vue"),
        meta: {
            title: '404'
        }
    }
]
//动态路由添加 Add Dynamic Routers 
export const DynamicRouting = {}
const router = new Router({
    mode: 'hash',
    scrollBehavior: () => ({
        y: 0
    }),
    routes: constantRoutes
})


const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
    return originalPush.call(this, location).catch(err => err)
}

export default router

/router/permissions.js

import router from "./index"
import {
    getToken
} from '@/utils/auth'
import Vue from "vue"
router.beforeEach((to, from, next) => {
    const token = getToken()
    if (token) {
        //有token (token avaliable)
        let role = localStorage.getItem('role')
        if (role == '1' && to.path == '/user') {
            //用户不允许管理用户 (users are not allowed to manage themselves)
            next('/equipment')
        } else {
            //管理员正常放行 (admins can pass freely)
            next()
        }
    } else {

        //无token，登录页面直接next (token unavaliable, jump into login page)
        if (to.path === '/login') {
            next()
        } else {
            next('/login')
        }

    }
})


router.afterEach((to, from) => {
    console.log('afterEach', to, from)
    if (to.meta.title) {
        document.title = to.meta.title //修改网页的title (change the title of this website)
    } else {
        document.title = localStorage.headerTxt || Vue.prototype.$vue_config.headerTxt
    }
})

main.js

...
import "./router/permission"
...

A simple flow chart.

)

Fix "None Type is not iterable " in Django

Maji-May — Sun, 19 Jun 2022 10:16:30 +0000

Error Message

According to the breakpoint debug, I found it's caused by the context processors that I had defined.

Comment it first.

# settings.py
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR / 'templates', os.path.join(BASE_DIR, 'templates')]
        ,
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
                # 'food.context_processors.access_realtime_cart_count'
            ],
        },
    },
]

Reason

Comment this line, the application turned into a normal state.

It seems that the context processor changed the context that login page needed.

We are in an unauthorized state when we enter the system for the first time. So we need to handle this situation.

Solution

The right way to declare a context processor is below:

### food/context_processors.py
from .models import OrderItem, Order


# the order item number of you current cart
def access_realtime_cart_count(request):
    if request.user.is_authenticated:
        try:
            active_order = Order.objects.get(user__username=request.user.username, status=1)
        except Order.DoesNotExist:
            newOrder = Order(user=request.user, total_price=0.0, status=1)
            newOrder.save()
            active_order = newOrder
        cart_count = OrderItem.objects.filter(order_id=active_order.id).count()
        return {'realtimeCartCount': cart_count} # you can access the "cart_count" variable in any tempaltes of your projec
    else: # handle the unlogin 
        return {'realtimeCartCount': 0}

DEV Community: Maji-May

Practical use of Vue-router navigation guard

Fix "None Type is not iterable " in Django

Error Message

Reason

Solution